另一个 HTML/CSS 布局挑战 - 带有粘性页脚的全高侧边栏 [英] yet another HTML/CSS layout challenge - full height sidebar with sticky footer

问题描述

更新 2

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

... 所以页脚不应该是 position: fixed;.内容不足时应在底部，内容多于页面高度时应下推.

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

更新

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

这对我来说是一个很大的挑战.想法...?

<小时>

我正在尝试在不使用 JavaScript 的情况下使此布局正常工作......这就是我在图片形式中的意思:

糟糕...当前布局

好...想要的布局

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

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

...以及防止 jsFiddle 宕机的代码...

HTML

<div id="header"><div id="header-content">Header</div></div><div id="内容"><div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div><div id="main">Main</div>
<div class="push"></div>

<div id="footer"><div id="footer-content">页脚</div></div>

CSS

html, body {边距:0px；填充:0px；最小高度:100%；高度:100%；}#包装{最小高度:100%；高度:自动！重要；高度:100%；边距:0 自动 -50px；/* 底部边距是页脚高度的负值 */}#页脚{高度:50px；}#footer-content {边框:1px 纯品红色；高度:32px；/* 高度 + 顶部/底部填充 + 顶部/底部边框必须加起来为页脚高度 */填充:8px；}.推 {高度:50px；清楚:两者；}#header {高度:50px；}#标题内容{边框:1px 纯品红色；高度:32px；/* 高度 + 顶部/底部填充 + 顶部/底部边框必须加起来为页脚高度 */填充:8px；}#内容 {高度:100%；}#侧边栏{边框:1px纯天蓝色；宽度:100px；高度:100%；向左飘浮;}

关于如何做到这一点的任何建议?我试过使用 position: fixed 但是当页面足够大并且你需要滚动时，这种方法变得非常难看.

解决方案

内容很少:http://jsfiddle.net/2ZhpH/41/

内容丰富:http://jsfiddle.net/2ZhpH/42/>

我将 position: relative 添加到 #wrapper，然后:

#sidebar {边框:1px纯天蓝色；宽度:100px；位置:绝对；左:0；顶部:50px；底部:50px；}#主要的 {左边距:102px}

(为什么 position: relative?只是为了避免这样的事情:http://jsfiddle.net/2ZhpH/40/)

UPDATE 2

So when the content in #main increases, it should push down the footer, like so:

... 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.

In both scenarios, #sidebar needs to span the height from the bottom of #header to the top of #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 without using JavaScript... here's what I mean in picture form:

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://jsfiddle.net/UnsungHero97/2ZhpH/

... and the code in case jsFiddle is down...

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

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: fixed but that approach becomes very ugly when the page is large enough and you need to scroll.

解决方案

With little content: http://jsfiddle.net/2ZhpH/41/

With lots of content: http://jsfiddle.net/2ZhpH/42/

I added position: relative to #wrapper, and then:

#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/)

这篇关于另一个 HTML/CSS 布局挑战 - 带有粘性页脚的全高侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！