Welcome to WebmasterWorld Guest from 54.144.44.9

Forum Moderators: not2easy

Message Too Old, No Replies

100% height divs not expanding height to fit content

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

New User

5+ Year Member

joined:Apr 23, 2011
posts: 7
votes: 0


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]

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

New User

5+ Year Member

joined:Apr 23, 2011
posts: 7
votes: 0


I should also add: I've tried overflow:auto on the outer div, but all that does it add scroll bars.
9:08 pm on Apr 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:6964
votes: 385


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).
9:17 pm on Apr 23, 2011 (gmt 0)

New User

5+ Year Member

joined:Apr 23, 2011
posts: 7
votes: 0


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.
9:25 pm on Apr 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:6964
votes: 385


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...
10:13 pm on Apr 23, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


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 ::
11:37 pm on Apr 23, 2011 (gmt 0)

New User

5+ Year Member

joined:Apr 23, 2011
posts: 7
votes: 0


Ok, scrap this thread. I'm going to start another that is more to the point of what I'm ultimately trying to do.
12:27 am on Apr 24, 2011 (gmt 0)

New User

5+ Year Member

joined:Apr 23, 2011
posts: 7
votes: 0


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