另一个HTML / CSS布局挑战 [英] another HTML/CSS layout challenge

问题描述

我一直在试图找出这个问题的解决方案，但没有100％成功，只是伪成功。我正在寻找的布局是这样的，无论内容的高度，页面的顶部和底部总是有固定的填充/边距/高度。

I've been trying to figure out a solution to this problem but haven't been 100% successful, just pseudo successful. The layout I'm looking for is one such that there is always a fixed padding/margin/height on the top and bottom of the page no matter the height of the content.

此外，内容的高度应该在填充之后立即在页面的顶部开始，并且在填充之前到达页面的底部。如果内容的高度不够大，它应该跨越整个页面。如果大于页面高度，则滚动条应显示为正常情况，但顶部/底部paddings需要保留。

Further, the height of the content should start at the top of the page right after the padding and reach the bottom of the page right before the padding. If the height of the content isn't large enough, it should span the whole page. If it is larger than the height of the page, the scrollbar should appear as in normal situations, but the top/bottom paddings need to be preserved.

要查看示例

• http://jsfiddle.net/UnsungHero97/uUEwg/1/ ...身高不够大

http://jsfiddle.net/UnsungHero97/uUEwg/8/ ... height too large

http://jsfiddle.net/UnsungHero97/uUEwg/8/ ... height too large

我的解决方案的问题是如果有背景图片，它将被填补的位置。那么如何扩展我的解决方案，如果有一个背景图像，它仍然会可见的顶部/底部paddings是？我希望这是一个HTML / CSS的解决方案，这是什么让这真的很难！

The problem with my solution is that if there is a background image, it will be covered up where the padding is. So how do I extend my solution such that if there is a background image, it will still be visible where the top/bottom paddings are? I would prefer this to be a HTML/CSS only solution, which is what makes this really hard!

让我知道如果我需要澄清什么。

Let me know if I need to clarify anything.

推荐答案

我想出了这个：

http://jsfiddle.net/bKsad/

• 由于使用 框大小：border-box

• 您可以在所有现代浏览器中使用此工具。


• 可以用 #content：之后替换＃padding-bottom 。谨防IE8，但我不能正常工作。

• Due to the use of box-sizing: border-box, it won't work in IE7 and older.
• It should work in all modern browsers.
• You could replace #padding-bottom with #content:after. Beware IE8 though, I couldn't quite get it working.

CSS： b
$ b

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: url(http://dummyimage.com/100x100/f0f/fff);
}

#wrapper {
    margin: 0 auto;
    width: 300px;
    height: 100%;
    padding: 15px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#content {
    background-color: #C9E6FF;
    min-height: 100%;
}
#padding-bottom {
    height: 15px;
}

HTML： b

<div id="wrapper">
    <div id="content">
        <p>some content</p>
        <p>some content</p>
        <p>some content</p>
    </div>
    <div id="padding-bottom"></div>
</div>

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