Question

我希望leftcolumn扩展到底部但同时保持在页脚之上（我尝试height: 100%但没有运气）。

这是我的标记：

<!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>Copyright © 2009 New Project. All Rights Reserved. </p>
  </div>
 </div>
</div>
</body> 
</html>

这是我的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;
}

实时页面

http://weedcl.zxq.net/

编辑：我试过了：

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

但仍然无法正常工作

Answer 1

我不是CSS大师，但如果我没记错，那是因为height属性与元素父元素有关。在这种情况下，它意味着你必须设置父元素的大小，或者使用实际值或者使用百分比，如果你设置了一个必须与它的父元素相关的百分比。

所以在你的例子中，据我所知，html > body > #content > #mainbar所有这些都需要height: 100%;

我希望它能解决它。

编辑：

I found this link that might help you too

Answer 2

如果两列都是白色的话，简单的方法是更改容器HTML，如下所示：

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

我已经为速度添加了内联样式，但显然你可以将它们移动到样式表中。

Answer 3

为什么不直接将 background-color：＃F9F9F9; 直接添加到容器div中？？

像这样：

#content .container {
    background: #F9F9F9
}

这将解决问题

我不能让div扩展到它的父div的底部

3 个答案: