The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> need help with div height:100%
Nicola
post Aug 22 2011, 10:50 AM
Post #1


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824



Hi, I'm trying to make a div extend all the way down to the bottom of the browser window, regardless of its content. I read that you have to assign 100% height to the div and its container, but what I've tried isn't working. Can someone explain why? Thanks! Here's my code:

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body {
    padding:0;
    border:0;
    margin:0;
    height:100%;
    background-color:#fdf5a2;
}
#content {
    height:100%;
    width:700px;
    padding:15px;
    border:0;
    margin:0;
    margin-left:16px;
    background-color:white;
}
</style>
</head>
<body>

<div id="content">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu nisi non dolor tempor pharetra. Nulla malesuada dignissim risus, ac elementum nisi dictum et. Integer pulvinar eleifend erat. Nulla ac dui et nulla suscipit aliquet id eget quam. Vivamus a neque mauris, in mattis eros. Sed at augue libero. Aenean et quam lectus. Praesent tincidunt aliquam faucibus. Nam id odio id sapien blandit tincidunt bibendum eget arcu. Maecenas venenatis mattis lectus, id fermentum tellus dapibus id. In id elit sit amet tortor dapibus lacinia eu ut arcu. Fusce malesuada commodo mi, et convallis ipsum euismod et. Integer quam leo, gravida a tincidunt mattis, posuere vel nibh. Donec magna tortor, euismod vel rutrum eu, fermentum quis augue. Nulla porta, arcu eu faucibus lacinia, urna sapien malesuada lacus, non semper mauris ipsum non sem. Quisque vitae justo lorem.</p>

</div>

</body>
</html>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 22 2011, 11:59 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



All the ancestors must have an explicit height, all the way up to the HTML root element:

CODE
html, body, #content {
height: 100%;
margin: 0;
padding: 0;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 22 2011, 02:02 PM
Post #3


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824



Thanks for your help! There's an unwelcome consequence, though -- now the background of #content doesn't extend past the initial browser line on longer pages (as in, when a vertical scroll is required).

Is there some way I can have both? -- the background extending the full browser height on short pages, and the full contents height on long pages?

It's been suggested that, instead of a background on #content, I use an image and a fixed positioned background, but I've encountered other problems with that. It's also been suggested that I look at sticky footers (like here), but I can't figure out how to modify it to suit my purposes.

Any suggestions?? Thanks so much!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Nicola
post Aug 22 2011, 03:18 PM
Post #4


Advanced Member
****

Group: Members
Posts: 109
Joined: 16-February 09
Member No.: 7,824



Never mind, I have figured it out! I ended up working with that sticky footer after all. Thanks for your help, though. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 7th June 2020 - 02:02 AM