I can't make div to expand until the bottom of its parent div

2022-12-18 03:15 问答作者：

I want the leftcolumn to expand until the bottom but at the same time to remain above of the footer (I tried height: 100% but no luck).

Here is my markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
 <title>New Project</title> 
 <link rel="stylesheet" type="text/css" href="styles/global.css" />
 <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.corner.js"></script>
 <script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head> 
<body id="home">
<div id="header">
 <div class="container">
  <div id="topbar">
   <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
   <ul id="lang">
    <li><a href="index.php">English</a></li>
    <li><a href="es/index.php">Español</a></li>
    <li><a href="tw/index.php">中文(繁體)</a></li>
    <li><a href="cn/index.php">中文(简体)</a></li>
   </ul>
   <ul id="nav"> 
    <li class="home"><a href="index.html">home</a></li>
    <li class="portfolio"><a href="portfolio.php">portfolio</a></li>
    <li class="about"><a href="about.php">about</a></li>
    <li class="contact"><a href="form.html">contact</a></li>
   </ul>
  </div> 
 </div>
</div>
<div id="content">
 <div class="container">
  <div id="tagline">
   <h2>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</h2>
  </div>
  <div id="mainbar">
   <h2>Left Column</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis cursus ipsum. Sed sed justo ac dolor scelerisque commodo id ac nunc. Maecenas quis massa metus, id consectetur sapien. Integer quis nunc porta purus sollicitudin vestibulum eu quis lacus. Vestibulum sollicitudin, turpis a interdum condimentum, lorem nulla consequat purus, a porttitor risus nunc eu felis. Suspendisse mattis justo at nibh aliquet pulvinar. Nulla facilisi. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Quisque vitae mauris quam. Suspendisse potenti. Aliquam sit amet ante lectus, sed placerat augue. Proin quis convallis felis. Sed nec urna id nulla ultricies varius non et leo. Vivamus mollis porttitor metus sit amet faucibus. Vestibulum placerat ante in est egestas viverra. Fusce elementum ante eu libero condimentum eget sagittis felis gravida. Nunc ac orci vel urna tempus sodales.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis cursus ipsum. Sed sed justo ac dolor scelerisque commodo id ac nunc. Maecenas quis massa metus, id consectetur sapien. Integer quis nunc porta purus sollicitudin vestibulum eu quis lacus. Vestibulum sollicitudin, turpis a interdum condimentum, lorem nulla consequat purus, a porttitor risus nunc eu felis. Suspendisse mattis justo at nibh aliquet pulvinar. Nulla facilisi. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Quisque vitae mauris quam. Suspendisse potenti. Aliquam sit amet ante lectus, sed placerat augue. Proin quis convallis felis. Sed nec urna id nulla ultricies varius non et leo. Vivamus mollis porttitor metus sit amet faucibus. Vestibulum placerat ante in est egestas viverra. Fusce elementum ante eu libero condimentum eget sagittis felis gravida. Nunc ac orci vel urna tempus sodales.</p>
  </div>
  <div id="sidebar">
   <h2>Right Column</h2>
   <p>Pellentesque faucibus est eu tellus varius in suscipit augue dapibus. In turpis ligula, faucibus eu mollis non, tincidunt ac magna. Integer tempor laoreet lacus, non accumsan ligula eleifend a. Nulla vitae tortor mauris. Fusce dapibus ultrices nibh id dignissim. Phasellus eget nibh ac quam rutrum mollis at vitae nisl. Morbi ultricies tristique tortor sed elementum. Vivamus id neque et lectus commodo tempor. Integer tincidunt, nunc ac hendrerit vestibulum, orci nisl commodo odio, a tempus leo libero nec sapien. Praesent a urna non diam mollis tristique. Duis nec elit lorem, vitae tristique nisi. Proin vel nulla in lectus consequat luctus ut et velit.</p>
  </div>
 </div>
</div>
<div id="footer">
 <div class="container">
  <div id="bottombar">
   <p>Cop开发者_如何学编程yright © 2009 New Project. All Rights Reserved. </p>
  </div>
 </div>
</div>
</body> 
</html>

Here is my CSS:

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
 content: '';
 content: none;
}
:focus { outline: 0; } /* remember to define focus styles! */
ins { text-decoration: none; } /* remember to highlight inserts somehow! */
del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */
table { 
 border-collapse: collapse; 
 border-spacing: 0; 
}
/* tags */
body {
 background: url(../images/bg.png) no-repeat scroll 0 0 #F9F9F9;
 color: #666;
 font-family: Arial, "MS Trebuchet", sans-serif;
 font-size: 75%;
}
h1 { 
 font-size: 24px;
}
h2 {
 color: #69C;
 font-size: 16px;
 margin: 0 0 20px 0;
}
p {
 line-height: 160%;
 margin-bottom: 10px;
}
a {
 color: #69C;
 list-style: none;
 text-decoration: none;
}
/* classes */
.container {
 margin: 0 auto;
 overflow: hidden;
 width: 960px;
}
/* structure */
#header {
 /* background: #EEE */
}
#topbar {
 background-color: #F9F9F9;
 float: left;
 padding: 10px 20px;
 margin: 0 20px;
 width: 880px; /* 720 */
}
#topbar h1 {
 background: url(../images/logo.png) no-repeat scroll 0 0 #F0F0F0;
 display: inline; /* ie6 hack */
 float: left;
 padding: 0 0 0 40px;
 text-indent: -9999px;
 width: 164px;
}
#header a { 
 color: #999;
}
#nav {
 clear: both;
 float: left;
 padding: 20px 0 0 0; 
}
#nav li {
 float: left;
 margin: 0 30px 0 0;
}
#nav li a {
 float: left;
 font-size: 16px;
 outline: none;
 text-decoration: none;
}
#nav li a:hover {
 color: #666;
}
#lang {
 float: right;
 padding: 9px 0 0 0;
}
#lang li {
 float: left;
 margin: 0 0 0 20px;
}
#lang li a { 
 font-size: 10px;
}
#home li.home a, #portfolio li.portfolio a{
 color: #666;
}
#content {
 /* background: #EEE */
}
#tagline {
 background-color: #F9F9F9;
 float: left;
 font-size: 20px;
 padding: 20px 20px;
 margin: 0 20px;
 width: 880px;
}
#tagline h2 {
 font-size: 24px;
 font-weight: 700;
 color: #999;
}
#sidebar {
 background-color: #F9F9F9;
 float: right;
 margin: 0 20px 10px 0;
 padding: 20px;
 width: 170px;  /* 240px */
}
#mainbar {
 background-color: #F9F9F9;
 float: left;
 padding: 20px;
 margin: 0 0 0 20px;
 width: 670px; /* 720 */
}
#footer {
 background: #333;
 color: #EEE;
 height: 100px;
}
#bottombar {
 clear: both;
 padding: 15px;
}

Live page:

http://weedcl.zxq.net/

EDIT: I tried this:

html, body, #content div.container, #mainbar {
    height: 100%
}

But still not working

I'm no CSS guru, but if I remember correctly it's because the height property is in relation to the elements parent element. In that case it means you have to set the size of the parent element as well, either with an actual value or with a percentage, if you do set a percentage that has to be in relation to it's parent too.

So in your example as far as I can see you have html > body > #content > #mainbar all of which needs the height: 100%;

I hope it fixes it.

Edit:

I found this link that might help you too

The easy way to do this, if both columns are going to be white, is to change the container HTML like so:

<div class="container" style="background-color: #ffffff;">
  <div id="tagline">
   <h2>Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio.</h2>
  </div>
  <div id="mainbar">
   <h2>Left Column</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis cursus ipsum. Sed sed justo ac dolor scelerisque commodo id ac nunc. Maecenas quis massa metus, id consectetur sapien. Integer quis nunc porta purus sollicitudin vestibulum eu quis lacus. Vestibulum sollicitudin, turpis a interdum condimentum, lorem nulla consequat purus, a porttitor risus nunc eu felis. Suspendisse mattis justo at nibh aliquet pulvinar. Nulla facilisi. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Quisque vitae mauris quam. Suspendisse potenti. Aliquam sit amet ante lectus, sed placerat augue. Proin quis convallis felis. Sed nec urna id nulla ultricies varius non et leo. Vivamus mollis porttitor metus sit amet faucibus. Vestibulum placerat ante in est egestas viverra. Fusce elementum ante eu libero condimentum eget sagittis felis gravida. Nunc ac orci vel urna tempus sodales.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis cursus ipsum. Sed sed justo ac dolor scelerisque commodo id ac nunc. Maecenas quis massa metus, id consectetur sapien. Integer quis nunc porta purus sollicitudin vestibulum eu quis lacus. Vestibulum sollicitudin, turpis a interdum condimentum, lorem nulla consequat purus, a porttitor risus nunc eu felis. Suspendisse mattis justo at nibh aliquet pulvinar. Nulla facilisi. Maecenas nisl quam, volutpat ut tincidunt quis, rutrum quis nibh. Nulla est nunc, pellentesque ac dictum ac, condimentum convallis odio. Quisque vitae mauris quam. Suspendisse potenti. Aliquam sit amet ante lectus, sed placerat augue. Proin quis convallis felis. Sed nec urna id nulla ultricies varius non et leo. Vivamus mollis porttitor metus sit amet faucibus. Vestibulum placerat ante in est egestas viverra. Fusce elementum ante eu libero condimentum eget sagittis felis gravida. Nunc ac orci vel urna tempus sodales.</p>
  </div>
  <div id="sidebar">
   <h2>Right Column</h2>
   <p>Pellentesque faucibus est eu tellus varius in suscipit augue dapibus. In turpis ligula, faucibus eu mollis non, tincidunt ac magna. Integer tempor laoreet lacus, non accumsan ligula eleifend a. Nulla vitae tortor mauris. Fusce dapibus ultrices nibh id dignissim. Phasellus eget nibh ac quam rutrum mollis at vitae nisl. Morbi ultricies tristique tortor sed elementum. Vivamus id neque et lectus commodo tempor. Integer tincidunt, nunc ac hendrerit vestibulum, orci nisl commodo odio, a tempus leo libero nec sapien. Praesent a urna non diam mollis tristique. Duis nec elit lorem, vitae tristique nisi. Proin vel nulla in lectus consequat luctus ut et velit.</p>
  </div>
  <div style="clear: both; overflow: hidden; height: 1px;"></div>
 </div>

I've added styles inline for speed but obviously you can move them into the stylesheet.

Why don't you simply add that background-color: #F9F9F9; directly to the container div!?

like so:

#content .container {
    background: #F9F9F9
}

This will solve the problem

继续阅读：css

I can't make div to expand until the bottom of its parent div

更多精彩内容

精彩评论

最新问答

绝区零和崩坏星穹铁道谁更吃配置?？

电视机蓝屏,边缘处带红是哪里的毛病？

双侧输卵管远端积水怎么治疗？

关于学生看电视有什么好处与坏处?？

永劫无间手游崔三娘魂玉怎么选择?？

问答排行榜

Escaping "<" in Perl-generated XML

微信重新建群怎么建？

imessage会显示已读吗？

太快了能不能慢一点好爽~好大~不要拔出来了？

二年级家长回音怎么写大全简短的（二年级家长回音怎么写）？