homepage Welcome to WebmasterWorld Guest from 54.204.68.109
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
100% height divs not expanding height to fit content
ccrookston




msg:4303093
 9:01 pm on Apr 23, 2011 (gmt 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]

 

ccrookston




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

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

tangor




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

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




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

tangor




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

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




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

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




msg:4303152
 11:37 pm on Apr 23, 2011 (gmt 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.

ccrookston




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved