CODEWITHSUNDEEP
jqueryhtmlcss
Bernard
Bernard

Reputation: 17281

Div to extend to full height of window if its content is smaller

I have a div with text content. I want the div height to extend to the full height of the browser window (view area) even when its content is not as high.

If the content makes it overflow the height of the window, I want the default behaviour. ie scroll bars appears AND the div height is not the same as the view area height.

I've put some code in on jsfiddle http://jsfiddle.net/bernard/gLjYg/16/. The yellow border should cover the whole window area unless you reduce the size of the window so that not all of the text is visible. In that case the text should be scrollable and the bottom or top border will be hidden.

index.html

<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title></title>
</head>

<body>
<div id="container">
    <div class="main">
        <h1>Think of a Nat Geo frame</h1><br>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    </div>
</div>

</body>
</html>

style.css

​body, html {
    margin: 0;
    background-color: #c0c0c0;
}

#container {
    border: 20px solid yellow;
}

.main {
    background-color: white;
    padding: 2em;
}

The markup is not that important. I'd however like to avoid non semantic divs. I would also prefer a CSS based solution.​

Upvotes: 0

Views: 1474

Answers (4)

Josh
Josh

Reputation: 403

Well, this might be a few years late, but I ended up on this article and for anyone else who does this is my solution:

http://jsfiddle.net/gLjYg/59/

First, I put all content into a single div:

<div class="main">
  <h1>Think of a Nat Geo frame</h1>
  <p>Lorem ipsum...</p>
</div>

Then, for easier to understand width/height measurements (includes padding, etc) I included border-box box sizing in the css:

* {
  box-sizing: border-box;
}

body, html {
    margin: 0;
    background-color: #c0c0c0;
}

.main {
  border: 20px solid yellow;
  background-color: white;
  padding: 2em;
  margin: 0;
}

Last, added the following javascript (with jQuery):

var $selector = $('.main');

setToWindowHeight($selector);
$(window).resize(function (){
  setToWindowHeight($selector);
});

function setToWindowHeight(selector) {
  selector.css({ 'min-height': $(window).innerHeight() });
}

On page load, and on resize, the .main div will have a min-height set equal to that of the window. The key here is min-height, so if the content is smaller than the window it will stretch to fit, but if the content is larger you will be able to scroll and nothing gets clipped out of view.

Upvotes: 0

Aman Gupta
Aman Gupta

Reputation: 8141

Some thing like this needs a very simple javascript fix! you'll need to first set the container's height after page load. After this you'll have to use a window resize event handler to keep checking if the new height of the window is smaller than the orignal height. If smaller, then make the container scrollable, while making sure the height has been adjusted as well. In case the window is resized back to its original height or bigger. this container will revert back to its original state.

<script>
var origHeight,container;
window.onload=function(){
origHeight= window.innerHeight;
container= document.getElementById("container");

};

window.addEventListener("resize", function(){
 container.style.height=window.innerHeight+"px";  
if(window.innerHeight< origHeight){

container.style.overflowY="auto";
}
else{

container.style.overflowY="default";
}

});
</script>

this is all you need to solve the varying height problem!

here's the fiddle http://jsfiddle.net/gLjYg/25/

Upvotes: 0

Nicolas Stamm
Nicolas Stamm

Reputation: 123

Is there any reason you have to split the border and padding between two divs? if not, I'd use this:

body, html {
    margin: 0;
    background-color: #c0c0c0;
}

#container {
    min-height: 100%;
}

.main {
    background-color: white;
    padding: 2em;
    border: 20px solid yellow;
}

I can't seem to figure out why body, html won't stretch to full height though.

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

Here you go:

http://jsfiddle.net/gLjYg/10/

I had to add one more DIV as with height 100% on .main plus it's padding it made .main too tall.

Upvotes: 1

Related Questions