homepage Welcome to WebmasterWorld Guest from
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

 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>
<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 />

If you want too see the page:


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)

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)

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)

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)

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)

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)

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 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