Content exceed div height

HTML & CSS
1

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.


#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;
}



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

2

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

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

Hi sorry to be not 100% complete. html and body:


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.

5

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

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


<!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%;
[COLOR=Blue]    margin:0;
    padding:0;[/COLOR]
}
body {
    font-size: 100%;
    line-height: 120%;
    font-family: Tahoma, Geneva, sans-serif;
    color: #333;
    [COLOR=Blue]background:#000;[/COLOR]
    [COLOR=Red]/*overflow: auto;*/[/COLOR]
}
#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;
    [COLOR=Blue]overflow: hidden;[/COLOR][COLOR=DarkGreen]/*uncollapse p margins */[/COLOR]
}
#content [B]p[/B] { [COLOR=DarkGreen]/*force min-height parent to expand*/[/COLOR]
    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

Hi Ray. I was again incomplete :rolleyes: sorry for that. I use the useful reset.


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.