Web Analytics Made Easy - StatCounter need help with div height:100% - CodingForum

Announcement

Collapse
No announcement yet.

need help with div height:100%

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    need help with div height:100%

    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>
    Tags: None
  • #2
    check out http://ryanfait.com/sticky-footer/

    This tut will teach you what you are trying to accomplish
    "The problem with troubleshooting is that trouble shoots back."

    Comment

    • #3
      Thanks for the link. I read through the tutorial and I was able to successfully apply it to my page, but I can't figure out how to modify it to my purposes. I don't want a footer, really -- I want the div to extend down to the very bottom. Do you have any suggestions?

      Edit: Like, for instance, how can I get a div I've placed inside .wrapper to extend down to .footer?
      Last edited by nicolasks; Aug 22, 2011, 03:24 PM. Reason: provide illustration

      Comment

      • #4
        Never mind, I have figured it out! Thank you very much for your help

        Comment

        • #5
          I'm facing somewhat similar problem.
          How did you resolve this ?

          Comment

          • #6
            Hi, sorry I didn't get back to you sooner. Here's basically what I did:

            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">
* {
padding:0;
border:0;
margin:0;
}
html, body {
height:100%;
}
#content {
min-height: 100%;
height: auto !important;
height:100%;
width:700px;
margin: 0 0 -20px 0;
background:red;
}
#push {
height: 20px;
}
#footer {
height: 20px;
width: 700px;
background:red;
}
</style>
</head>
<body>
<div id="content">
	<h1>Lorem ipsum</h1>
	<div id="push"></div>
</div>
<div id="footer">&nbsp;</div>
</body>
</html>

            Comment

            Previous template Next
            Working...
            X
            😀
            🥰
            🤢
            😎
            😡
            👍
            👎