CODEWITHSUNDEEP
htmlheightextend
DanielFox
DanielFox

Reputation: 675

Extend div to bottom of page

I know this is a question that is asked a lot, but I couldn't find any solution at all to what should be a simple thing.

Here's my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <link rel="stylesheet" href="../cssReset.css" />
    <style>
        html, body {
            height: 100%;
        }
        #menu {
            height: 100px;
            background-color: red;
        }
        #center {
            height: 250px;
            background-color: green;
        }
        #main {
            height: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>
</html>

Prety simple, but I just can't make the last div extend to the bottom of the page. If I use "auto" it will not display anything, as there's no content. If I use 100%, it will use my browser height and create unecessary scrollbars.

What can I do?

Thanks.

Upvotes: 2

Views: 3264

Answers (4)

Code It Error Free
Code It Error Free

Reputation: 11

Maybe the following is what you are looking for:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <style>
        *{margin:0;padding:0}
        html, body {
            height: 100%;
        }
        #menu {
            height: 10%;
            background-color: red;
        }
        #center {
            height: 25%;
            background-color: green;
        }
        #main {
            height: 75%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>
</html>

Upvotes: 0

Code It Error Free
Code It Error Free

Reputation: 11

may be the following markup code would be what you are looking for just add a "overflow:hidden" in your css style sheet will fix your problem.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <style>
    *{margin:0;padding:0}   
        html, body {
            height: 100%;
            overflow: hidden;   
        }
        #menu {
            height: 100px;
            background-color: red;
        }
        #center {
            height: 250px;
            background-color: green;
        }
        #main {
            height: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>

Upvotes: 1

Louis Ricci
Louis Ricci

Reputation: 21086

You could always take the easy way out and use JavaScript. Here's a simple example.

<style>
DIV { margin: 0; }
</style>
<script>
function fixMain() {
    var menu = document.getElementById("menu");
    var center = document.getElementById("center");
    var main = document.getElementById("main");
    var height = document.body.offsetHeight - (menu.offsetHeight + center.offsetHeight);
    main.style.height = height + 'px';
}
window.addEventListener("load", fixMain, false);
window.addEventListener("resize", fixMain, false);
</script>

Upvotes: 4

tina
tina

Reputation: 101

I tested your markup, it shows the last div 'main' extend to the bottom of the page.... what is being displayed for you? And what styling info is there in the referred cssReset.css ( although this would be overridden by the style on the page html

Upvotes: 0

Related Questions