我环顾四周并没有找到QUITE我正在寻找的东西,所以希望这个问题还没有在其他地方得到解答!
无论如何,可以找到有问题的布局HERE。我想要实现的是固定宽度左列和流体宽度内容区域。在大多数情况下,它工作得很好。但是,当内容扩展超出浏览器窗口的高度或宽度时,这些部分似乎不会像我希望的那样扩展。请注意,顶部的灰色条不会到达页面内容的右侧,左列的高度也不会到达页面内容的底部。
我是否认为这是因为通过CSS设置100%高度或100%宽度的东西是静态的?即,保存调用CSS时浏览器窗口的高度/宽度是什么,那就是那个?
如果是这种情况,也许我需要研究一些其他设置元素高度和宽度的方法。有任何想法吗?另请注意,页面中的虚拟内容暂时是图像。我想模糊名称等,以保持数据的私密性。
感谢所有人的帮助!
答案 0 :(得分:1)
这样的事情怎么样......
左栏只会到达正确的内容。如果您希望它在没有足够内容填充时扩展到视口的高度,则需要一些javascript,否则您将不得不使用填充html
的重复背景
演示:http://jsfiddle.net/wdm954/KyUfN/
<div id="wrapper">
<div id="left">left</div>
<div id="right">
<div id="content">
<div id="top">top</div>
content
</div>
</div>
</div>
... CSS
/* clearfix */
#wrapper:after, #right:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
#wrapper, #right {
display: inline-block;
}
#wrapper, #right {
display: block;
-height: 1px;
}
/* end clearfix */
#wrapper {
background-color: #000000;
}
#left {
float: left;
width: 300px;
color: #FFF;
}
#right {
margin-left: 300px;
}
#top {
height: 100px;
background-color: #DEDEDE;
border-bottom: 1px solid #B8B8B8;
}
#content {
background-color: #F4EBEB;
height: 600px;
width: 1200px;
}
答案 1 :(得分:0)
如果背景是主要问题,您可以设置包装器的样式。这就是我最终为一个不守规矩的侧边栏所做的事情,因为我不想诉诸JS并且其他解决方案对我不起作用。在我的情况下,侧边栏的问题是由于jQuery选项卡,这是主题的一部分。当我切换到标签时,侧边栏不会延伸到整个高度,因此背景也不会。
<强> HTML 强>
<div id="wrapper" class="sidebar-right">
<div id="maincontent">
#content
</div>
<div id="sidebar-right">
#sidebar content
</div>
</div>
<强> CSS 强> (这假设960网格,280px侧边栏)
#wrapper.sidebar-right{
background: white url('images/bg.png');
background-repeat: repeat-y; /*repeats down the length of the page*/
background-position: 680px 0px; /*moves it into place*/
}
如果您有不同的侧边栏或全宽布局,请相应地更改背景图像/位置和样式。希望有所帮助。