CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AlexStack
AlexStack

Reputation: 17381

Is there any way to stretch a div without JavaScript?

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.

Upvotes: 2

Views: 380

Answers (4)

sg3s
sg3s

Reputation: 9567

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.

Upvotes: 0

leegor
leegor

Reputation: 532

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%;
}

Upvotes: 0

AlexStack
AlexStack

Reputation: 17381

<!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>

Upvotes: 1

Joel A. Villarreal Bertoldi
Joel A. Villarreal Bertoldi

Reputation: 8017

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

Upvotes: 0

Related Questions