另一个 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:45:27  来源:igfitidea点击:

yet another HTML/CSS layout challenge - full height sidebar with sticky footer

htmlcsslayout

提问by Hristo

UPDATE 2

更新 2

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

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

scroll

滚动

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

坏...当前布局布局不好

GOOD... desired layoutgood 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 ?

那个怎么样 ?

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

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

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,您不会注意到它。