How to make a div fill the remaning vertical space using css

前端未结

关注

 2  1245

I am attempting to make a standard website layout with a header, a navigation bar a body (on the right of the navigation bar) and a footer

相关标签:

2条回答

面向向阳花

2021-01-05 04:47

Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.

More detail here

...and for supporting IE5 and IE6, here's an improved version using only CSS (no javascript).

0 讨论(0)
发布评论:

提交评论
- 加载中...

情书的邮戳

2021-01-05 04:49

add this code to your body,html:

body,html{
  height:100%;
}

and make your navbar <div id="navbar"> instead of <div class="navbar"> then add height: 100%; to your navbar

#navbar{
  height:100%
// rest of your code
}

Same to your content call it something like content, because body is already used.

#content{
  height:100%
// rest of your code
}

now all the divs will have a height of 100% so the full browser height.

EDIT: your full code would look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">

            html, body{
                padding: 0;
                margin: 0 auto;
                height: 100%;
            }

            #header {
                width: 100%;
                height: 75px;
            }

            #navbar {
                float: left;
                width: 20%;
                height: 100%;
                min-height:100%;
                overflow: scroll;
            }

            #content {
                float: right;
                width: 80%;
                height: 100%;
                min-height:100%;
                overflow: scroll;
            }
            #footer {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="header"> Header </div>
        <div id="navbar"> Nav Bar </div>
        <div id="content"> Body </div>
        <div id="footer"> Footer</div>
    </body>
</html>

0 讨论(0)