homepage Welcome to WebmasterWorld Guest from 54.146.190.193
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
100% height divs not expanding height to fit content
ccrookston



 
Msg#: 4303091 posted 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#: 4303091 posted 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

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



 
Msg#: 4303091 posted 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#: 4303091 posted 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

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



 
Msg#: 4303091 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4303091 posted 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#: 4303091 posted 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#: 4303091 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved