Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to apply 100% height to div?

I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.

<html style="height:100%">
<head>
    <style type="css">
        html , body {
            width:100%; height:100%;
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
    <div style="height:100%;width:100%">
        <div style="height:100px;background-color:#ddd">&nbsp;</div>
        <div style="height:25px;background-color:#eee">&nbsp;</div>
        <div style="display:block;height:100%;background-color:#ccc">&nbsp;</div>
    </div>
</body>
</html>
like image 448
Wasim Shaikh Avatar asked Nov 30 '09 08:11

Wasim Shaikh


People also ask

How do I make my html height 100%?

With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content).

What does height 100 do in CSS?

height: 100% gives the element 100% height of its parent container.


1 Answers

In jQuery, you can try something like this:

$(function() {
    $(window).resize(function() {
        $('div:last').height($(window).height() - $('div:last').offset().top);
    });
    $(window).resize();
});

Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.

If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:

$('div:last').height($(window).height() - $('div:last').offset().top - 30);

Assuming you want the div 30px from the bottom of the window.

like image 185
Tatu Ulmanen Avatar answered Oct 11 '22 12:10

Tatu Ulmanen