html – 侧边栏不垂直拉伸

概述到目前为止,这是我的 JSFiddle. 我该怎么做才能使整个页面上的侧边栏垂直伸展(高度)？现在它延伸到Web浏览器窗口的原始高度,但是当容器内有更多内容时,侧边栏不会随之拉伸. HTML： <div class="main-content"> <div class="sidebar"> menu </div> <div 到目前为止,这是我的 JSFiddle.

我该怎么做才能使整个页面上的侧边栏垂直伸展(高度)？现在它延伸到Web浏览器窗口的原始高度,但是当容器内有更多内容时,侧边栏不会随之拉伸.

HTML：

<div >        <div >            menu        </div>        <div >            ... a bunch of content ...        </div>    </div>

来自上面的Jsfiddle的CSS：

HTML,body {    wIDth: 100%;    height: 100%;}.main-content {    wIDth: 100%;    height: 100%;}.sIDebar {    wIDth: 100px;    float: left;    background-color: #000;    color: #fff;    min-height: 100%;}.content {    wIDth: 200px;    float: left;}

解决方法 我不认为这个问题有一个“纯粹的”CSS解决方案.问题是你的侧边栏是它的父容器的100％高度.它的父容器主内容是它父级(窗口)的100％高度.因此,为了使您的内容与主内容的内容相同,您必须将像素高度值设置为主内容.

但是你可以用jquery轻松解决这个问题.

var sIDebar = $('.sIDebar');var content = $('.content');if (content.height() > sIDebar.height() )    sIDebar.CSS('height',content.height());else    sIDebar.CSS('height',sIDebar.height());

小提琴：

http://jsfiddle.net/up7Zg/29/和http://jsfiddle.net/up7Zg/30/

总结

以上是内存溢出为你收集整理的html – 侧边栏不垂直拉伸全部内容，希望文章能够帮你解决html – 侧边栏不垂直拉伸所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。