css - 将 Div 扩展到其容器的长度

标签 css html extend

我正在尝试扩展左侧边栏,使其跨越页面(或容器 DIV)的长度。我尝试将容器的高度设置为 100%,然后将侧边栏的高度设置为 100%,但这没有用。

这是我的代码:

div#container
{
overflow: hidden;
margin-left: auto;
margin-right: auto;
margin-top: 0px;    
padding-bottom: 10px;
width: 880px;   
height: 100%;
text-align: left;
}

div#left
{
float: left;
width: 280px;
height: 100%;   
padding: 4px;   
background: #F1D7A5;
}

页面如下所示:http://www.studentbridges.org/new/

任何关于如何扩展侧边栏的意见都将不胜感激!

谢谢!

~诺艾尔

最佳答案

我通常通过将侧边栏的背景作为图像放在侧边栏的容器上并沿 y 轴重复它来解决这个问题。这实际上并没有拉伸(stretch)你的侧边栏,但它看起来是一样的。 在您的情况下,您可以直接截取页面的打印屏幕,将其裁剪为 1px 高度和 880px 宽度,并将其设置为 #container 的背景:

background: url(<path_to_image>) repeat-y center;

您也可以从 #left 移除背景。 避免使用表格的一切!

关于css - 将 Div 扩展到其容器的长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11694856/

相关文章:

javascript - 全屏iframe背景视频

javascript - 基于 HTML 的小册子/传单

javascript - 使用 Node js 通过搜索按钮将数据库中的数据检索到 html 中

css - 出现在整个页面上的特定 div 的背景色

jquery - 调整PNotify通知的初始位置

javascript - 从同一来源重新加载 <img> 元素

EMACS:扩展/扩展区域,使其包含整行

Javascript,简单的扩展方法,允许扩展对象的多个版本

javascript - 通过appendChild()可以添加哪些JS对象?

javascript - jquery 和事件滚动