问题:

I am trying to get a layout that has no scrollbars and has a fixed header div(height 150px) and then below that a div that fills the rest of the page (will be a google map).

The problem

The map extend down below the bottom of the view-port and I get a scrollbar.

I am looking for a CSS only solution.

HTML

<div id="container">     <div id="header"></div>     <div id="map"></div> </div>

CSS

#container {     position:relative;     height:100%;     min-height:100%;     width:100%;     margin:0;     padding:0; } #map {     position:absolute;     top:150px;     width:100%;     height:100%;     background-color:#bb3311; } #header {     height:150px;     position:absolute;     width:100%;     background-color:#00ffbb; }

回答1:

<html> <head> <style type="text/css"> * { padding: 0; margin: 0;} /* do not use universal selector this is just for example */ #container{     position: relative;     height: 100%;     width: 100%;     background: yellow; }  #map {     position: absolute;     top: 150px;     bottom: 0;     left: 0;     right: 0;     background: red;     overflow: hidden; }  #header {     height: 150px;     background: green; } </style> </head> <body> <div id="container">     <div id="header"></div>     <div id="map"></div> </div> </body> </html>

Add overflow hidden where needed.

文章来源: Fixed Div On Top, Div that Fills Rest of Page on Bottom - CSS

标签

rest

div

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!