CSS边栏高度100％
我已经把头靠在墙上几个小时试图找出这个问题，并认为这一定是我想念的小事。 我在网上search，但没有发现似乎工作。 HTML是：
<body> <div id="header"> <div id="bannerleft"> </div> <div id="bannerright"> <div id="WebLinks"> <span>Web Links:</span> <ul> <li><a href="#"><img src="../../Contenthttp://img.dovov.comMySpace_32x32.png" alt="MySpace"/></a></li> <li><a href="#"><img src="../../Contenthttp://img.dovov.comFaceBook_32x32.png" alt="Facebook"/></a></li> <li><a href="#"><img src="../../Contenthttp://img.dovov.comYoutube_32x32.png" alt="YouTube"/></a></li> </ul> </div> </div> </div> <div id="Sidebar"> <div id="SidebarBottom"> </div> </div> <div id="NavigationContainer"> <ul id="Navigation"> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> </ul> </div> <div id="Main"> <!-- content --> </div> </body> 我的完整的CSS是：
* { margin: 0px; padding: 0px; } body { font-family: Calibri, Sans-Serif; height: 100%; } #header { width: 100%; z-index: 1; height: 340px; background-image: url("../../Contenthttp://img.dovov.combannercenter.gif"); background-repeat: repeat-x; } #header #bannerleft { float: left; background-image: url("../../Contenthttp://img.dovov.combannerleft.gif"); background-repeat: no-repeat; height: 340px; width: 439px; z-index: 2; } #bannerright { float: right; background-image: url("../../Contenthttp://img.dovov.combannerright.gif"); background-repeat: no-repeat; width: 382px; height: 340px; background-color: White; z-index: 2; } #Sidebar { width: 180px; background: url("../../Contenthttp://img.dovov.comSidebar.png") repeat-y; z-index: 2; height: 100%; position: absolute; } #SidebarBottom { margin-left: 33px; height: 100%; background: url("../../Contenthttp://img.dovov.comSidebarImage.png") no-repeat bottom; } #NavigationContainer { position: absolute; top: 350px; width: 100%; background-color: #bbc4c3; height: 29px; z-index: 1; left: 0px; } #Navigation { margin-left: 190px; font-family: Calibri, Sans-Serif; } #Navigation li { float: left; list-style: none; padding-right: 3%; padding-top: 6px; font-size: 100%; } #Navigation a:link, a:active, a:visited { color: #012235; text-decoration: none; font-weight: 500; } #Navigation a:hover { color: White; } #WebLinks { float: right; color: #00324b; margin-top: 50px; width: 375px; } #WebLinks span { float: left; margin-right: 7px; margin-left: 21px; font-size: 10pt; margin-top: 8px; font-family: Helvetica; } #WebLinks ul li { float: left; padding-right: 7px; list-style: none; } #WebLinks ul li a { text-decoration: none; font-size: 8pt; color: #00324b; font-weight: normal; } #WebLinks ul li a img { border-style: none; } #WebLinks ul li a:hover { color: #bcc5c4; }
我希望侧边栏与我的页面内容一样高，并将侧边栏底部图像始终放在侧边栏的底部。
更新：由于这个答案仍然得票上下，并在写作八岁的时候：现在可能有更好的技术。 原始答案如下。
显然你正在寻找虚拟列技术:-)
通过如何计算高度属性，不能将height: 100%设置在具有自动高度的东西内。
这对我有效
.container { overflow: hidden; .... } #sidebar { margin-bottom: -5000px; /* any large number will do */ padding-bottom: 5000px; .... }
在CSS的flexbox变得更加主stream之前，你总是可以绝对地定位侧边栏，把它从顶部和底部粘贴到零像素，然后在主容器上设置一个边距来补偿。
的jsfiddle
HTML
<section class="sidebar">I'm a sidebar.</section> <section class="main">I'm the main section.</section>
CSS
section.sidebar { width: 250px; position: absolute; top: 0; bottom: 0; background-color: green; } section.main { margin-left: 250px; }
注 ：这是一个简单的方法来做到这一点，但你会发现bottom并不意味着“页面底部”，而是“窗口底部”。 如果您的主要内容向下滚动，侧边栏可能会彻底结束。
我会使用CSSexpression到100％的边栏高度。
基本的想法是将侧边栏和主div包装在一个容器中。
给容器一个display:table
并给2子div（侧边栏和主） display: table-cell
像这样..
#container { display: table; } #main { display: table-cell; vertical-align: top; } #sidebar { display: table-cell; vertical-align: top; }
看看这个实况演示 ，我已经使用上述技术修改了您的初始标记（我已经使用不同的div的背景颜色，以便您可以看到哪些是哪个）
我已经在不同的项目上遇到了这个问题几次，但是我find了适合我的解决scheme。 你必须使用四个div标签 – 一个包含侧边栏，主要内容和页脚。
首先，样式表中的元素：
#container { width: 100%; background: #FFFAF0; } .content { width: 950px; float: right; padding: 10px; height: 100%; background: #FFFAF0; } .sidebar { width: 220px; float: left; height: 100%; padding: 5px; background: #FFFAF0; } #footer { clear:both; background:#FFFAF0; }
你可以编辑不同的元素，但是你要确保你不要改变页脚属性“clear：both” – 这是非常重要的。
然后，简单地设置你的网页是这样的：
<div id=”container”> <div class=”sidebar”></div> <div class=”content”></div> <div id=”footer”></div> </div>
我在http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container上写了一篇更深入的博客文章。; 请让我知道，如果你有任何问题。 希望这可以帮助！
进一步@montrealmike的答案，我可以只加我的适应？
我做到了这一点：
.container { overflow: hidden; .... } #sidebar { margin-bottom: -101%; padding-bottom: 101%; .... }
我做了“101％”的东西来迎合（超稀有）的可能性，有人可能正在一个高度超过5000像素的巨大屏幕上观看网站！
很好的回答，蒙特利尔。 它对我来说是完美的。
也许多列布局爬出箱子是你在找什么？
Flexbox（ http://caniuse.com/#feat=flexbox ）
首先在div或section中包装你想要的列，例如：
<div class="content"> <div class="main"></div> <div class="sidebar"></div> </div>
然后添加下面的CSS：
.content { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
我正面临与Jon一样的问题。 利兹特把我放在了正确的轨道上，但是不得不停留在侧栏的底部。 所以我做了一些调整
重要：
- 包含侧边栏和内容的div的定位（#bodyLayout）。 这应该是相对的。
- 必须停留在sidbar底部的div的定位（#sidebarBottomDiv）。 这应该是绝对的。
- 内容的宽度+侧栏的宽度必须等于页面的宽度（＃容器）
这是CSS：
#container { margin: auto; width: 940px; } #bodyLayout { position: relative; width: 100%; padding: 0; } #header { height: 95px; background-color: blue; color: white; } #sidebar { background-color: yellow; } #sidebarTopDiv { float: left; width: 245px; color: black; } #sidebarBottomDiv { position: absolute; float: left; bottom: 0; width: 245px; height: 100px; background-color: green; color: white; } #content { float: right; min-height: 250px; width: 695px; background-color: White; } #footer { width: 940px; height: 75px; background-color: red; color: white; } .clear { clear: both; }
这里是html：
<div id="container"> <div id="header"> This is your header! </div> <div id="bodyLayout"> <div id="sidebar"> <div id="sidebarTopDiv"> This is your sidebar! </div> <div id="content"> This is your content!<br /> The minimum height of the content is set to 250px so the div at the bottom of the sidebar will not overlap the top part of the sidebar. </div> <div id="sidebarBottomDiv"> This is the div that will stay at the bottom of your footer! </div> <div class="clear" /> </div> </div> </div> <div id="footer"> This is your footer! </div>
我想，今天可能会使用flexbox。 看到圣杯的例子 。
我意识到这是一个旧的职位，但我正在努力工作，为我的网站有一个侧边栏。 这会工作吗？
#sidebar-background { position:fixed; width:250px; top:0; bottom:0; background-color:orange; } #content-background { position:fixed; right:0; top:0; bottom:0; left:250px; background-color:pink; } #sidebar { float:left; width:250px; } #content { float:left; width:600px; } <div id="sidebar-background"></div> <div id="content-background"></div> <div id="sidebar">Sidebar stuff here</div> <div id="content">Stuff in here</div>
我认为你的解决scheme将包装你的内容容器和侧边栏在父母包含股利。 将侧边栏浮动到左侧，并为其指定背景图片。 至less为您的内容容器创build边栏的宽度。 添加清除浮动黑客 ，使其一切工作。
如果您使用的是固定宽度的侧栏，请使用正文背景，与您的侧栏相同的宽度图像。 也把你的CSS代码中的background-repeat：repeat-y。
位置绝对，顶部：0和底部：0为侧边栏和位置相对包装（或容器）女巫内容的所有元素，它完成了！
