CODEWITHSUNDEEP
csslayout
Jason
Jason

Reputation: 11615

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: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;
}

Upvotes: 1

Views: 3070

Answers (1)

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

<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.

Upvotes: 4

Related Questions