个人中心
gpt4 book ai didi

css - 我无法让 div 扩展到其父 div 的底部

转载 作者：太空宇宙 更新时间：2023-11-04 00:32:54 24 4
gpt4 key购买 nike

我希望左列扩展到底部但同时保持在页脚上方(我尝试了 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%
}

还是不行

最佳答案

我不是 CSS 大师，但如果我没记错的话，那是因为高度属性与元素父元素有关。在这种情况下，这意味着您还必须设置父元素的大小，使用实际值或百分比，如果您设置的百分比也必须与其父元素相关。

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

我希望它能修复它。

编辑:

I found this link that might help you too

关于css - 我无法让 div 扩展到其父 div 的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2126875/

24 4 0
文章推荐： css - 资源管理器上左浮动元素之后的 DIV 出现在该元素之后(而不是在下方)
文章推荐： javascript - 为什么在 Node 中打开 fifo 管道会阻止 child_process.exec？
文章推荐： javascript - 当我们必须使用pdfkit在nodejs中创建pdf时如何更改动态值
文章推荐： html - 编写带有图像按钮的简单搜索输入框的最佳可访问性和 W3C 有效方法是什么？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com