1. Home
  2. Forums Index
  3. Browser Side / CSS 2:00 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

100% height divs not expanding height to fit content

         

ccrookston

9:01 pm on Apr 23, 2011 (gmt 0)

10+ Year Member



Here's the entire HTML. (For now I've got all the CSS inline just so it's easier too read on this thread. In the file I'm working on it's all in a .css file.) 


<!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" style="height:100%;">
<head runat="server">
 <title>trying to learn css</title>
</head>
<body style="height:100%;">
<div style="margin:auto; width:1000px; height:100%; border:1px solid black;">
<div style="width:200px; float:left; height:100%; border:1px solid green;">
hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />
hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />
hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />
hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />
hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />
hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />hey<br />
</div>
</div>
</body>
</html>


If you want too see the page:

<snip>

I want the two div's to expand height to fit the content. Seems like it should be simple, but I am just not figuring it out. Thanks!

[edited by: alt131 at 1:02 pm (utc) on Nov 27, 2011]
[edit reason] Thread Tidy - 404 [/edit]

ccrookston

9:02 pm on Apr 23, 2011 (gmt 0)

10+ Year Member



I should also add: I've tried overflow:auto on the outer div, but all that does it add scroll bars.

tangor

9:08 pm on Apr 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Both divs were 104% HEIGHT on my screen... not sure what you're attempting. What browser are you using to view? (FF4 IE8/9 on my side).

ccrookston

9:17 pm on Apr 23, 2011 (gmt 0)

10+ Year Member



in both IE and FF, the inner div stops at the same height as the outer div, but the content (hey...) keeps going past both of the div's borders. What I want is for both div's to expand to the height of the content in the inner div.

Hope that makes sense.

tangor

9:25 pm on Apr 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



My screen resolution is apparently too great... the "content" came up short, but the div boxes showed full height (and a bit more) just fine. Again, what versions of browser and what operating system? Also remember to clear cache when making changes for review...

lucy24

10:13 pm on Apr 23, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I don't believe it can be done. Not many elements allow you to set a height at all, let alone a percentage. The CSS folks [w3.org] don't sound encouraging.

:: wandering off to investigate javascript possibilities for positioning bottom-aligned background-image in page that is shorter than your average browser window ::

ccrookston

11:37 pm on Apr 23, 2011 (gmt 0)

10+ Year Member



Ok, scrap this thread. I'm going to start another that is more to the point of what I'm ultimately trying to do.

ccrookston

12:27 am on Apr 24, 2011 (gmt 0)

10+ Year Member



New thread here: [webmasterworld.com...]
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:00 pm May 1, 2026