另一个HTML / CSS布局挑战

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

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

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

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

我的解决方案的问题是,如果有背景图像,它将覆盖填充的位置.那么如何扩展我的解决方案,使得如果有背景图像,它仍然可以看到顶部/底部填充的位置？我更喜欢这是一个HTML / CSS唯一的解决方案,这使得这真的很难！

如果我需要澄清任何事情,请告诉我.

解决方法

我想出了这个：

http://jsfiddle.net/bKsad/

>由于使用了box-sizing: border-box,它将无法在IE7及更早版本中使用.
>它应该适用于所有现代浏览器.
>你可以用#content：after替换#padding-bottom.但要注意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>

另一个HTML / CSS布局挑战

解决方法

猜你在找的HTML相关文章