SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Content exceed div height

    For a control room I'm making, I have a simple 2 column 100% width 100% height setup with just a header at the top. Everything works fine except on the product detail page (holding a lot of information) the content exceed the 100% height of the parent. This is the setup.
    Code CSS:
    #header {
      height: 60px; /*To clearify the negative top margin for #sidebar and #content */
    	background: url(../images/admin/header.jpg) top center;
    	overflow: hidden;
    	position: relative;
    	z-idex: 1;
    }
     
    #sidebar {
    	width: 220px;
    	min-height: 100%;
    	margin-top: -60px;
    	float: left;
    }
    #content {
    	min-height: 100%;
    	margin: -60px 0 0 230px;
    	background: #FFF url(../images/admin/sidebar.gif) 0 0 repeat-y;
    }

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page Title</title>
    </head>
     
    <body>
     
    <!-- #header -->
    <div id="header">
    </div><!-- #header -->
     
    <!-- #sidebar -->
    <div id="sidebar">
    </div><!-- #sidebar -->
     
    <!-- #content -->
    <div id="content">
    </div><!-- #content -->
     
    </body>
    </html>

    #content is the one holding all the content, about 4 fieldsets in this case. What should I adjust
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    the content exceed the 100% height of the parent
    Hi donboe,

    From looking at the code the <body> is the parent in this case and I assume you have set height:100% on it.

    If by chance you set overflow:hidden on the body then that is the problem.

    Hard to say without seeing your body styles

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to make the content scrollable. But I'm still pretty unclear.

    First off, a wrapper for #sidebar and #content, moved up -60px. (should it be about the footer, though ? sounds like sticky footer technique to me)

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi sorry to be not 100% complete. html and body:
    Code CSS:
    html, body {
    	width: 100%;
    	height: 100%;
    }
    body {
    	font-size: 100%;
    	line-height: 120%;
    	font-family: Tahoma, Geneva, sans-serif;
    	color: #333;
    }

    Edit: I have set overflow to scroll for #content as noonnope suggested, but that gives me (allthough they are not active) those extra scroll bars right and bottom.

    Edit again. overflow auto solved the problem. Thanks guys.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Everything works fine except on the product detail page (holding a lot of information) the content exceed the 100% height of the parent.
    Right, the content of #content is going to overflow the body's fixed height if it exceeds it. That's how min-height on the #content div works.

    Even if it's content was 1/2 of what it is now it would be doing the same thing at a reduced viewport height.

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Edit again. overflow auto solved the problem. Thanks guys.
    The point I was trying to make is that you will get the same results with or without overflow:auto on the body.

    It also looks like you did not remove the default margins/paddings from the body which would have been adding to it's 100% height.

    In this test case you can see that it works the same with or without overflow:auto
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    
    <style type="text/css">
    html, body {
        width: 100%;
        height: 100%;
        margin:0;
        padding:0;
    }
    body {
        font-size: 100%;
        line-height: 120%;
        font-family: Tahoma, Geneva, sans-serif;
        color: #333;
        background:#000;
        /*overflow: auto;*/
    }
    #header {
        height: 60px;/*To clearify the negative top margin for #sidebar and #content */
        background: red;
        overflow: hidden;
        position: relative;
        z-idex: 1;
    }
    #sidebar {
        width: 220px;
        min-height: 100%;
        margin-top: -60px;
        float: left;
        background: #0F0;
    }
    #content {
        min-height: 100%;
        margin: -60px 0 0 230px;
        background: #CDF;
        overflow: hidden;/*uncollapse p margins */
    }
    #content p { /*force min-height parent to expand*/
        margin:80px 20px;
    }
    </style>
    
    </head>
    <body>
    
    <div id="header"></div>
     
    <div id="sidebar"></div>
    
    <div id="content">
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
    </div> 
    
    </body>
    </html>

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    The point I was trying to make is that you will get the same results with or without overflow:auto on the body.

    It also looks like you did not remove the default margins/paddings from the body which would have been adding to it's 100% height.

    In this test case you can see that it works the same with or without overflow:auto
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    
    <style type="text/css">
    html, body {
        width: 100%;
        height: 100%;
        margin:0;
        padding:0;
    }
    body {
        font-size: 100%;
        line-height: 120%;
        font-family: Tahoma, Geneva, sans-serif;
        color: #333;
        background:#000;
        /*overflow: auto;*/
    }
    #header {
        height: 60px;/*To clearify the negative top margin for #sidebar and #content */
        background: red;
        overflow: hidden;
        position: relative;
        z-idex: 1;
    }
    #sidebar {
        width: 220px;
        min-height: 100%;
        margin-top: -60px;
        float: left;
        background: #0F0;
    }
    #content {
        min-height: 100%;
        margin: -60px 0 0 230px;
        background: #CDF;
        overflow: hidden;/*uncollapse p margins */
    }
    #content p { /*force min-height parent to expand*/
        margin:80px 20px;
    }
    </style>
    
    </head>
    <body>
    
    <div id="header"></div>
     
    <div id="sidebar"></div>
    
    <div id="content">
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
        <p>Dummy Content</p>
    </div> 
    
    </body>
    </html>
    Hi Ray. I was again incomplete sorry for that. I use the useful reset.
    Code CSS:
    html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,dl,dt,dd,table,tr,td,th,p,img {
    	margin: 0; 
    	padding: 0;
    }
    and instead of the overflow: auto on the body I have it on #content and so far my problems seems to be solved.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

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