Question

我正在尝试使用

创建模板

标题+侧边栏（半页/全高）+谷歌地图（半页/全高）

在jsfiddle中，很难看到细节，但是在浏览器的一侧给了我一个我不想要的滚动条。此外，侧边栏比标准高40px（标题的高度）。并且谷歌地图没有达到谷底。所以，即使它的高度为100％，它也会更短。

我试图把它们放在一个容器中，并设法使它与浮动标题一起工作，但它切断了侧边栏和地图的顶部，这是不理想的。

  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/

Answer 2

尝试使用某种包装器？边栏也更长，因为它是100％而帆布是90％。

使用包装时请尝试overflow: hidden

标题+侧边栏（半页/全高）+谷歌地图（半页/全高）

2 个答案: