div固定在浏览器顶部,固定Div在顶部，Div填充底部的其余页面-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

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;

}

解决方案

* { 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;

}

Add overflow hidden where needed.