Is there any way to stretch a div without JavaScript?

Question

I'm working on a template which has a header, content and footer section. The content is iframe and has a fixed width of 1000px floating at the center of the screen. I want the header and footer be visible all the time. ie. the scroolbar be displayed for the iframe. I've searched stackoverflow and there's no solution to my problem. These two pages seem to be close, but they don't answer my question:

Expand a div to take the remaining width

Expand div to max width when float:left is set

I solve the problem with JQuery but I suspect there's an easier way to do this only with CSS (no javascript either).

Here is my code (all in one HTML, only needs jquery):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
}
#header {
    width:100%;
    height:150px;
    background-color:red;
}
#body {
    width:100%;
    height:100%;
    background-color:blue;
}
#footer {
    height:50px;
    background-color:orange;
}
iframe {
    display:block;
    width:1000px;
    height:100%;
    margin:0 auto 0 auto;
    padding:0;
    background-color:yellow;
    border:none;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="header">Header text</div>
<div id="body">
  <iframe src="http://www.google.com"> iframes are not supported on your browser </iframe>
</div>
<div id="footer">Footer text</div>
<script type="text/javascript">
var HEADER_FOOTER_HEIGHT=0;
$(document).ready(function(e) {
    HEADER_FOOTER_HEIGHT=$("#header").height()+$("#footer").height();
    $("#body").height($(window).height()-HEADER_FOOTER_HEIGHT);
});
$(window).resize(function() {
    $("#body").height($(window).height()-HEADER_FOOTER_HEIGHT);
});
</script>
</body>
</html>

Edit: I found a solution. Please see below.

Not really possible in CSS if you want a fluid interface. CSS can't do calculations, so you can't do stuff like "100% - 50px" (which would be ultra-ultra-ultra handy, if the W3C's CSS groups weren't suffering from cranial-fundament insertion syndrome). You'd to have to use fixed heights and set the numbers appropriately. — Marc B, Sep 09 '11 at 15:42
yeah I found this "calc()" method or something similar in FF but apparently no other browser supported it and then FF dropped support as well. I'm not sure, though. — AlexStack, Sep 09 '11 at 15:47
_"Is there any way to stretch a div without jQuery?"_ - Yes, of course there is. jQuery is just JavaScript, albeit very clever JavaScript, so anything it can do can be done by writing your own JavaScript equivalent. Have a look at the jQuery .height() function code... — nnnnnn, Sep 09 '11 at 16:00
I meant without javascript. but thanks for bringing it up. I edited the question. — AlexStack, Sep 09 '11 at 16:03

AlexStack · Accepted Answer · 2011-09-09T16:03:39.860

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
}
#header {
    position:absolute;
    top:0;
    width:100%;
    height:150px;
    background-color:red;
}
#body {
    position:absolute;
    top:150px;
    bottom:50px;
    width:100%;
    background-color:blue;
}
#footer {
    position:absolute;
    width:100%;
    bottom:0;
    height:50px;
    background-color:orange;
}
iframe {
    display:block;
    width:1000px;
    height:100%;
    margin:0 auto 0 auto;
    padding:0;
    background-color:yellow;
    border:none;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="header">Header text</div>
<div id="body">
  <iframe src="http://www.google.com"> iframes are not supported on your browser </iframe>
</div>
<div id="footer">Footer text</div>
</body>
</html>

score 0 · Answer 2 · answered Sep 09 '11 at 15:53

0

I think you could consider LESS for dynamic CSS: http://lesscss.org/

answered Sep 09 '11 at 15:53

Joel A. Villarreal Bertoldi

7,829
8
35
51

1

I found one solution that only needs CSS. Please see the question. I put it there. – AlexStack Sep 09 '11 at 15:54
LESS still can't to `100% - 50px` for example. I think the solution here is JavaScript. – Bojangles Sep 09 '11 at 15:55

score 0 · Answer 3 · answered Sep 09 '11 at 16:06

Try these changes, it work for me.

#header {
    background-color: red;
    height: 150px;
    position: absolute;
    top: 0;
    width: 100%;
}
#body {
    background-color: blue;
    bottom: 50px;
    position: absolute;
    top: 150px;
    width: 100%;
}
#footer {
    background-color: orange;
    bottom: 0;
    height: 50px;
    position: absolute;
    width: 100%;
}

score 0 · Answer 4 · answered Sep 10 '11 at 22:31

You can do it like this:

http://jsfiddle.net/2KRmn/1/

I am guessing that is what you want... It's not really IE6 friendly but with some effort it could be (since you can do calculations in ie6). I also reccommend you get rid of the iframe etc.

If you need the iframe itself to be centered then thats a little more tricky, though, possible. However I wonder how that would work with a scrollbar there. I think it's prettier if you let the content of the iframe do it's own centering anyway, keeping the scrollbar to the far right.

Heres an example of that anyway: http://jsfiddle.net/2KRmn/2/

Examining the other answers, this is roughly the way you do it, but I think my example is a bit cleaner.

Is there any way to stretch a div without JavaScript?

4 Answers4