CODEWITHSUNDEEP
htmlcss
dandoen
dandoen

Reputation: 1647

Full height & width, fixed header, full content height with CSS

I have been searching for this on SO, but I just could not find something exactly similar. What I am trying to achieve is to have a page, that is full in height and in width, but does have a fixed header. The content height needs to be the remaining area left, but that area needs to have a height of 100%, most of the html code found on SO is just using height: auto. Basically I want to do this so that I can style it: adding border etc. Here's the code so far:

<html>
<head>
    <title>Test</title>
    <style type="text/css">
    body, html {
    height:100%;
    }

    body {
    margin:0;
    padding:0;
    }

    #header{
    height:50px; 
    background:green;
    width:100%; 
    }

    #wrapper {
    background:blue;
    position:relative;
    min-height:100%;
    height:auto !important;
    height:100%;
    }

    #content {
        margin: 10px;
        background-color: black;
        height: 100%;
        width: 100%;
border: 3px dashed gray;
    }
    </style>
</head>
<body>
    <div id="wrapper">
    <div id="header">header</div>
    <div id="content"></div>
    </div>
</body>
</html>

Upvotes: 2

Views: 28457

Answers (1)

thirtydot
thirtydot

Reputation: 228282

See: http://jsbin.com/agiyer

Note that if the content is too tall to fit inside #content, it will simply be hidden.

HTML:

<div id="header">header</div>
<div id="content">content</div>

CSS:

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px; 
    background: green
}
#content {
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
    border: 3px dashed gray;
    background: #ccc
}

Upvotes: 3

Related Questions