Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2010
    Location
    Like me, on a tiny speck of dust floating in the Virgo Cluster.
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post

    XHTML 1.0, transitional; div height 100%

    Hello again.

    I am baffled as to how I can create a nested div that fits the height of the parent div.

    For example, something like this
    Code:
    <div id="bodycontent" style="width:1024px; background:url(imgs/opaque.png); text-align:left; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:10px;">
    	<div id="content_side" style="width:200px; height:750px; min-height:100%; background:#000; color:#e6e6e6; margin-right:5px; margin-top:0px; float:left;">
    	One
    	<hr style="color:#ec6224;" />
    	Two
    	<hr style="color:#ec6224;" />
    	Three
    	<hr style="color:#ec6224;" />
    	Four
    	</div>
    <h3>Title</h3>
    <p>This page has content about you.</p>
    <p>Vestibulum ultricies eros at sem aliquet et ultricies massa luctus.</p>
    <p>filler...</p>
    <p>Quisque nec turpis libero. Sed ante enim, suscipit vitae vulputate non, mollis id eros. </p>
    <p>filler...</p>
    <p>Suspendisse ornare nisi sed nibh laoreet gravida. Curabitur scelerisque eleifend ligula, rhoncus venenatis erat varius nec. </p>
    <p><br />filler...</p>
    <p><br />filler...</p>
    <p><br />filler...</p>
    <p><br /><br /><br /><br />filler...</p>
    </div>
    I would like for the content_side height to match the height of the parent div, but height:100% and min-height:100% do not seem to work.

    So, would anyone here happen to have any useful suggestions?

    Thanks in advance!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    A height of 100% has no effect unless the parent has a height. Give the 'body content' div a pixel height to see the effect.

    It you want both divs to stretch to the full height of the browser then you would need to give the parent div a height of 100%, and the same for body and html.

    I would encourage you to create a stylesheet rather than squeezing everything into a style attribute:
    Code:
    <head>
    <style type="text/css">
    html { height: 100%; }
    body { height: 100%; }
    #bodycontent { 
        height: 100%; 
        width: 1024px; /* etc.. */
    }
    #content_side { 
        height: 100%; 
    }
    </style>
    </head>
    Height 100% is discussed here.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Oct 2010
    Location
    Like me, on a tiny speck of dust floating in the Virgo Cluster.
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    Andrew:

    I did not think about that beforehand, so I will see what happens when I do that later.

    And I do use a css file; I just figured it would be easier to show their elements like that without having to copy more code.

  • #4
    New Coder
    Join Date
    Oct 2010
    Location
    Like me, on a tiny speck of dust floating in the Virgo Cluster.
    Posts
    29
    Thanks
    1
    Thanked 1 Time in 1 Post
    Andrew:

    Okay, I finally got his sample to work. (Oddly, it did not work on the initial attempt until I converted to XHTML strict. Then I went back to transitional, and it is working all of a sudden.)

    I swear... this is more of a pain than it needs to be!
    Last edited by Leprkawn; 05-12-2011 at 02:01 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •