Geek asks and answers

Create a fixed height horizontal fluid div

I am trying to set the layout in the base three lines: header, content, and footer. The two outer most divs have a fixed height; The center of the div should be fluid and adapt to the height of the browser screen.

Sample of layout

Can someone point me in the right direction how to solve this with the right CSS? At the moment, I'm not interested in javascript solution yet. Since CSS doesn't give a clear answer, the javascript solution comes outstanding!

Here's how far I came:

<div id='header'>Header</div>
    <div id='content'>
        <div id='innerContent'>
            This is the fluid part
        </div>
    </div>
<div id='footer'>footer</div>

CSS

#header {
    position:absolute;
    top:0px;
    left:0px;
    height:100px;
    z-index:5;
}
#content {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    z-index:2;
}
#innerContent {
    margin-top:100px;
    height:100%;
}
#footer {
    height:400px;
}
+3
source share
3 answers

EDIT: , . - , , . -, .

, , , . , , div . , div, , .

, div. , , .

. <br /> div , , .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #wrapper {
        min-height: 100%;
        min-width: 100%;
        position: absolute;
    }

    #header {
        height: 100px;
        background-color: red;
    }

    #content {
        background-color: gray;
        margin-bottom: 50px;
    }

    #footer {
        height: 400px;
        min-width: 100%;
        position: absolute;
        bottom: 0px;
        margin-bottom: -350px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id='header'>Header</div>
        <div id='content'>
            Content

        </div>
        <div id='footer'>footer</div>
    </div>
</body>
</html>

ORIGINAL: , css . viewport height ( h) h-100-50. , 50px . - div.

min-height . Google : http://browsersize.googlelabs.com/

, 620 ( google ~ 80% ). div 620-100-50 = 470 px.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #header {
        height: 100px;
        background-color: red;
    }

    #content {
        min-height: 470px;
        background-color: gray;
    }

    #footer {
        height: 400px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div id='header'>Header</div>
    <div id='content'>
        Content
    </div>
    <div id='footer'>footer</div>
</body>
</html>
+4

. , , div 50-100 .

jsfiddle: http://jsfiddle.net/AX5Bh/

min-height max-height CSS div #innerContent.

, , . , , div #innerContent. , - . <em>, , max-height .

If you delete all the text, but the first sentence you will see that it is 50 pixels high.

Here is the link for browser support min-heightand max-height: http://caniuse.com/#search=max-height

0
source

More articles:


All Articles