另一个HTMLCSS布局挑战 – 全高度侧边栏粘贴页脚

概述更新2 所以当#main中的内容增加时，它应该向下推页脚，就像这样： 所以页脚不应该是位置：固定。当内容不足时，应该在底部，当页面的高度比内容高的时候应该被压下。 在这两种情况下，#sidebar需要跨越#header底部到#footer顶部的高度。 UPDATE 一些残酷的细节…当页面上的内容很小时，页脚应该在底部，但是当内容足够大时，它应该将页脚向下推(这是粘贴页脚链接中描述的功能提供)。我需 更新2

所以当#main中的内容增加时，它应该向下推页脚，就像这样：

所以页脚不应该是位置：固定。当内容不足时，应该在底部，当页面的高度比内容高的时候应该被压下。

在这两种情况下，#sIDebar需要跨越#header底部到#footer顶部的高度。

UPDATE

一些残酷的细节…当页面上的内容很小时，页脚应该在底部，但是当内容足够大时，它应该将页脚向下推(这是粘贴页脚链接中描述的功能提供)。我需要侧边栏始终位于页眉和页脚之间的全高度(从页眉的底部到页脚的顶部)。

这对我来说是相当的挑战。想法…？

我试图使这个布局工作，而不使用JavaScript …这是我的意思在图片形式：

BAD …当前布局

好…想要布局

请注意边栏如何在所需的布局中一直延伸到页脚。我正在使用粘性页脚方法，http://ryanfait.com/sticky-footer/和http://www.cssstickyfooter.com/，现在我需要扩展侧边栏，从标题到页脚跨越高度。这是我有…

http://jsfiddle.net/UnsungHero97/2ZhpH/

…和代码，以防Jsfiddle关闭…

HTML

<div ID="wrapper">    <div ID="header"><div ID="header-content">header</div></div>    <div ID="content">        <div ID="sIDebar">SIDebar<br/>SIDebar<br/>SIDebar<br/></div>        <div ID="main">Main</div>    </div>    <div ></div></div><div ID="footer"><div ID="footer-content">Footer</div></div>

CSS

HTML,body {    margin: 0px;    padding: 0px;    min-height: 100%;    height: 100%;}#wrapper {    min-height: 100%;    height: auto !important;    height: 100%;    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */}#footer {    height: 50px;}#footer-content {    border: 1px solID magenta;    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */    padding: 8px;}.push {    height: 50px;    clear: both;}    #header {    height: 50px;}#header-content {    border: 1px solID magenta;    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */    padding: 8px;}#content {    height: 100%;}#sIDebar {    border: 1px solID skyblue;    wIDth: 100px;    height: 100%;    float: left;}

有什么建议如何做到这一点？我已经尝试使用位置：固定，但当页面足够大，您需要滚动时，该方法变得非常难看。

解决方法 内容很少： http://jsfiddle.net/2ZhpH/41/

有很多内容：http://jsfiddle.net/2ZhpH/42/

我添加了位置：相对于#wrapper，然后：

#sIDebar {    border: 1px solID skyblue;    wIDth: 100px;    position: absolute;    left: 0;    top: 50px;    bottom: 50px;}#main {    margin-left: 102px}

(为什么位置：相对？只是为了避免这样的事情：http://jsfiddle.net/2ZhpH/40/)

总结

以上是内存溢出为你收集整理的另一个HTML/CSS布局挑战 – 全高度侧边栏粘贴页脚全部内容，希望文章能够帮你解决另一个HTML/CSS布局挑战 – 全高度侧边栏粘贴页脚所遇到的程序开发问题。

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