Question

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

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

要查看我的伪解决方案示例，请查看这个小提琴......

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

我的解决方案的问题是，如果有背景图像，它将覆盖填充的位置。那么如何扩展我的解决方案，使得如果有背景图像，它仍然可以看到顶部/底部填充的位置？我更希望这是一个仅限HTML / CSS的解决方案，这才是真正的难点！

如果我需要澄清任何内容，请告诉我。

Answer 1

我想出了这个：

http://jsfiddle.net/bKsad/

由于使用box-sizing: border-box，因此无法在IE7及更早版本中使用。
它应该适用于所有现代浏览器。
您可以将#padding-bottom替换为#content:after。但要注意IE8，我无法让它发挥作用。

<强> 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：

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

Answer 2

这可能是你所追求的=＆gt; http://jsfiddle.net/Husar/uUEwg/24/？

Answer 3

这个问题的最佳和简单的解决方案是这个。在这种情况下   你需要两个高度：


Windows高度

侧栏导航高度

然后检查窗户高度是否小于div，那么你需要增加内容区域的高度

$( document ).ready(function() { 
    var navh = $(".side-nav").height();//ide-nav
    var h = window.innerHeight;
    if (navh >h){
        $("#mainBody").height(navh);
    }
})

另一个HTML / CSS布局挑战

3 个答案: