Fixed Div On Top, Div that Fills Rest of Page on Bottom - CSS
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:relat开发者_如何学Cive;
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;
}
<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.
加载中,请稍侯......
精彩评论