另一个 HTML/CSS 布局挑战 - 带有粘性页脚的全高侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6837603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
yet another HTML/CSS layout challenge - full height sidebar with sticky footer
提问by Hristo
UPDATE 2
更新 2
So when the content in #mainincreases, it should push down the footer, like so:
所以当内容#main增加时，它应该向下推页脚，像这样：
... so the footer should not be position: fixed;. It should be on the bottom when there is not enough content and should be pushed down when there is more content than the height of the page.
...所以页脚不应该是position: fixed;。内容不足时应在底部，内容多于页面高度时应下推。
In both scenarios, #sidebarneeds to span the height from the bottom of #headerto the top of #footer.
在这两种情况下，都#sidebar需要跨越从底部#header到顶部的高度#footer。
UPDATE
更新
Some brutal specifics... the footer should be at the bottom whenever the content on the page is small, but when the content is large enough, it should push the footer down (this is the functionality described in the sticky footer links I've provided). I need the sidebar to always be between the header and footer at full height (from bottom of header to top of footer).
一些残酷的细节......当页面上的内容很小时，页脚应该在底部，但是当内容足够大时，它应该将页脚向下推（这是我在粘性页脚链接中描述的功能）假如）。我需要侧边栏始终处于全高度（从页眉底部到页脚顶部）的页眉和页脚之间。
This is quite the challenge for me. Ideas...?
这对我来说是一个很大的挑战。想法……？
I'm trying to make this layout work withoutusing JavaScript... here's what I mean in picture form:
我试图在不使用 JavaScript 的情况下使这个布局工作......这就是我在图片形式中的意思：
BAD... current layout
坏...当前布局
GOOD... desired layout
好...所需的布局
Notice how the sidebar extends all the way to the footer in the desired layout. I'm using the sticky footer approaches, http://ryanfait.com/sticky-footer/and http://www.cssstickyfooter.com/, and now I need to extend the sidebar to span the height from the header to the footer. Here's what I have...
请注意侧边栏如何在所需布局中一直延伸到页脚。我正在使用粘性页脚方法http://ryanfait.com/sticky-footer/和http://www.cssstickyfooter.com/，现在我需要扩展侧边栏以跨越从页眉到页眉的高度页脚。这是我所拥有的...
http://jsfiddle.net/UnsungHero97/2ZhpH/
http://jsfiddle.net/UnsungHero97/2ZhpH/
... and the code in case jsFiddle is down...
...以及以防 jsFiddle 关闭的代码...
HTML
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 class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>
CSS
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;
}
Any suggestions on how to do this? I've tried using position: fixedbut that approach becomes very ugly when the page is large enough and you need to scroll.
关于如何做到这一点的任何建议？我试过使用，position: fixed但是当页面足够大并且您需要滚动时，这种方法变得非常难看。
回答by thirtydot
With little content: http://jsfiddle.net/2ZhpH/41/
内容很少：http: //jsfiddle.net/2ZhpH/41/
With lots of content: http://jsfiddle.net/2ZhpH/42/
内容丰富：http: //jsfiddle.net/2ZhpH/42/
I added position: relativeto #wrapper, and then:
我添加position: relative到#wrapper, 然后：
#sidebar {
border: 1px solid skyblue;
width: 100px;
position: absolute;
left: 0;
top: 50px;
bottom: 50px;
}
#main {
margin-left: 102px
}
(why position: relative? Just to avoid something like this: http://jsfiddle.net/2ZhpH/40/)
（为什么position: relative？只是为了避免这样的事情：http: //jsfiddle.net/2ZhpH/40/）
回答by Joonas
Reading really isnt my thing so dont hang me if i missed something, but I think this should do it.
阅读真的不是我的事所以如果我错过了什么不要挂我，但我认为这应该这样做。
http://jsfiddle.net/Fggk6/- Note that the sidebar uses background image, it's a lot easier that way. Both sidebar and content area backgrounds come from #wrap
http://jsfiddle.net/Fggk6/- 请注意，侧边栏使用背景图像，这样容易得多。侧边栏和内容区域背景都来自#wrap
Also note that the sticky footer has my fingerprints all over it since its my own design ..it might be dirty.
另请注意，粘性页脚上到处都是我的指纹，因为它是我自己的设计……它可能很脏。
回答by Barry Kaye
If you add position:absolute;to css style #sidebarit will extend all the way down.
如果您添加position:absolute;到 css 样式#sidebar，它将一直向下延伸。
You will then need to amend div id="mainto <div id="main" style="margin-left:100px;position:absolute;">Main</div>or create another css class.
然后，您将需要修改div id="main到<div id="main" style="margin-left:100px;position:absolute;">Main</div>或创建另一个CSS类。
I hope this is clear.
我希望这很清楚。
回答by Warface
How about that ?
那个怎么样 ？
UPDATE
更新
Added background color to show that with a footer fixed to the bottom, normal that the height of the sidebar is beyond the footer. With z-index, you won't notice it.
添加了背景颜色，以显示页脚固定在底部，侧边栏的高度超出页脚的正常情况。使用 z-index，您不会注意到它。
