我有一个容器 div,每边都有两个侧边栏,中间有一个内容框。标准的“博客”布局。内容远远超出了侧边栏,侧边栏高度在我的最后一句话处停止。如何扩展高度以便自动扩展到页面底部,从而在中间的内容框的末尾?
6 回答
这是如何做到的:
的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”:
- 打开 Photoshop 或任何图像编辑器
- 制作一个 1px 高和 1px 宽的新图像。
- 给它上色,你希望你的背景是什么颜色。
- 将图像保存为“dot.jpg”并上传到您网站上的“图像”文件夹。
不工作?
访问http://yourwebsite.com/images/dot.jpg并查看您是否看到点图像。如果您看到“404 未找到”错误,则说明您使用了错误的 URL。修复 URL,它将起作用。
笔记:
将“yourwebsite.com”更改为您的网站。
祝你好运!
你是对的!好消息 - 不需要 100% 的高度声明!谢谢 :) 最重要的两件事是侧边栏的背景图像或颜色与容器的相同,并且底部 div(本例中的“页脚”)具有属性“clear:both”。我认为其他所有内容都可以根据需要进行编辑...
我在不同的项目中多次遇到这个问题,但我找到了适合我的解决方案。您必须使用四个 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上写了一篇更深入的博客文章。请让我知道,如果你有任何问题。希望这可以帮助!
不幸的是,没有万无一失的方法可以实现这一目标。
在不使用 JavaScript 的情况下执行以下操作的一种方法是通过一种称为Faux-Columns的技术。
它基本上涉及将 abackground-image
应用于浮动元素的父元素,这使您相信这两个元素的高度相同。
更多信息请访问:
基本上你不能。如果您试图让设计元素(例如背景图像)一直延伸到底部,最好的方法是伪造它。我的意思是创建一个包装器来包装您的所有侧边栏和内容,并使您的背景图像成为该包装器的背景。然后它会一直延伸到底部。
如果您真的想要(畏缩),另一种方法是使用表格。但请不要。