css - 侧边栏 Div 扩展容器的整个高度

Question

我有一个容器 div，每边都有两个侧边栏，中间有一个内容框。标准的“博客”布局。内容远远超出了侧边栏，侧边栏高度在我的最后一句话处停止。如何扩展高度以便自动扩展到页面底部，从而在中间的内容框的末尾？

Answer 1

这是如何做到的：

的HTML：

<div id="container">
    <div id="main">
        Content...
    </div>
    <div id="sidebar">
        Content...
    </div>
</div>

CSS：

#container {
   width: 1000px;
   background: url(http://yourwebsite.com/images/dot.jpg) repeat;
   overflow: auto;
}
#main {
   width: 70%;
   float: left;
}
#sidebar {
   width: 30%;
   float: right;
}

如何制作“dot.jpg”：

1. 打开 Photoshop 或任何图像编辑器
2. 制作一个 1px 高和 1px 宽的新图像。
3. 给它上色，你希望你的背景是什么颜色。
4. 将图像保存为“dot.jpg”并上传到您网站上的“图像”文件夹。

---

不工作？

访问http://yourwebsite.com/images/dot.jpg并查看您是否看到点图像。如果您看到“404 未找到”错误，则说明您使用了错误的 URL。修复 URL，它将起作用。

笔记：

将“yourwebsite.com”更改为您的网站。

祝你好运！

Answer 2

看看CssPlay.co.uk

Answer 3

你是对的！好消息 - 不需要 100% 的高度声明！谢谢 :) 最重要的两件事是侧边栏的背景图像或颜色与容器的相同，并且底部 div（本例中的“页脚”）具有属性“clear:both”。我认为其他所有内容都可以根据需要进行编辑...

Answer 4

我在不同的项目中多次遇到这个问题，但我找到了适合我的解决方案。您必须使用四个 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”&gt;
<div class=”sidebar”&gt;</div>
<div class=”content”&gt;</div>
<div id=”footer”&gt;</div>
</div>

我在http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container上写了一篇更深入的博客文章。请让我知道，如果你有任何问题。希望这可以帮助！

Answer 5

不幸的是，没有万无一失的方法可以实现这一目标。

在不使用 JavaScript 的情况下执行以下操作的一种方法是通过一种称为Faux-Columns的技术。

它基本上涉及将 abackground-image应用于浮动元素的父元素，这使您相信这两个元素的高度相同。

更多信息请访问：

A List Apart：文章：Faux Columns

Answer 6

基本上你不能。如果您试图让设计元素（例如背景图像）一直延伸到底部，最好的方法是伪造它。我的意思是创建一个包装器来包装您的所有侧边栏和内容，并使您的背景图像成为该包装器的背景。然后它会一直延伸到底部。

如果您真的想要（畏缩），另一种方法是使用表格。但请不要。