html - 页眉 + 侧边栏(半页/全高)+ 谷歌地图(半页/全高)

Question

我想做一个模板

页眉+侧边栏(半页/全高)+谷歌地图(半页/全高)

在 jsfiddle 中，很难看到细节，但在浏览器的一侧给我一个我不想要的滚动条。此外，侧边栏比预期高 40 像素(标题的高度)。而且谷歌地图没有到达底部。因此，即使它的高度为 100%，它也更短。

我试图将它们放在一个容器中，并设法使其与 float 标题一起使用，但它切断了侧边栏和 map 的顶部，这并不理想。

http://jsfiddle.net/sebababi/TW4uQ/1/

  html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    max-height:100%;
  }
  #map-canvas {
    height: 90%;
    margin: 0px;
    padding: 0px
    float:left;
  }
  #sidebar{
  background-color:grey;
  width:50%;
  height:100%;
  float:left;
  }
  #header{
  background-color:green;
  width:100%;
  height:40px;
  }

<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="map-canvas"></div>

有什么想法吗？

Answer 1

    <div id="page">
    <div id="header">
    <div id="nav">nav</div>
    </div><!-- header -->
    <div id="main">
    <div id="sidebar">sb</div>
    <div id="map">map</div>
    </div><!-- main -->
    </div><!-- page -->

  html, body {   height:100%;   width:100%;   padding:0;   margin:0;}#page {  display:table;  border-spacing:0;  width:100%;  height:100%;}#header {  display:table-row;}#main {  display:table-row;  position:relative;}#nav {  background:green;  width:100%;  position:absolute;  left:0;  right:0;  height:40px;}#sidebar, #map-canvas {  display:table-cell;  width:50%;  bottom:0;  position:absolute;     top:40px;}#sidebar {  background:blue;   left:0;}#map-canvas {    overflow:hidden;    right:0;}

http://jsfiddle.net/XB5Lp/1/