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

问题描述

UPDATE 2

因此，当 #main 中的内容增加时，所以：

...所以页脚不应该是 position：fixed; 。当内容不足时，应该位于底部，当内容数量超过页面高度时，应将其向下推。

在这两种情况下， #sidebar 需要跨越 #header 底部到 #footer 。

UPDATE

一些残酷的细节...页脚应该在底部每当页面上的内容很小，但是当内容足够大时，它应该推下页脚（这是在我提供的粘性页脚链接中描述的功能）。我需要侧边栏总是在标题和页脚之间的全高度（从页眉底部到页脚顶部）。

这对我来说是一个挑战。想要...？

---

我想使用JavaScript ...这是我的意思是在图片形式：

BAD ...当前布局

GOOD ...所需布局

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

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

...以及jsFiddle失败时的代码...

HTML

< div id =header>< div id =header-content>标头< / div>< / div>
< div id =content>
< div id =sidebar>侧栏< br />侧栏< br />侧栏< 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; / *底部边距是页脚高度的负值* / 
} 
 #footer {
 height：50px; 
} 
＃footer-content {
 border：1px solid magenta; 
 height：32px; / * height + top / bottom paddding + top / bottom border必须加到页脚高度* / 
 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必须加到页脚高度* / 
 padding：8px; 
} 
 #content {
 height：100％; 
} 
 #sidebar {
 border：1px solid skyblue; 
 width：100px; 
 height：100％; 
 float：left; 
} 
  

有关如何做的任何建议？我尝试使用 position：fixed ，但是当页面足够大，你需要滚动时，这种方法变得非常难看。

解决方案

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

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

我添加了 position：relative 到 #wrapper ，然后：

  #sidebar {
 border：1px solid skyblue; 
 width：100px; 
 position：absolute; 
 left：0; 
 top：50px; 
 bottom：50px; 
} 
 #main {
 margin-left：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屋！