相关疑难解决方法(0)

另一个HTML/CSS布局挑战 - 带有粘性页脚的全高侧边栏

更新2

因此,当内容#main增加时,它应该按下页脚,如下所示:

滚动

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

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

UPDATE

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

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


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

坏...目前的布局 布局不好

好......期望的布局 良好的布局

注意侧边栏如何以所需的布局一直延伸到页脚.我正在使用粘性页脚方法,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 class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>
Run Code Online (Sandbox Code Playgroud)

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 …
Run Code Online (Sandbox Code Playgroud)

html css layout

17
推荐指数
2
解决办法
3万
查看次数

标签 统计

css ×1

html ×1

layout ×1