html - 为什么我的填充底部在带有滚动条的 CSS 中失败？

Question

我有一个类似于 this 的问题发布，但是海报的代码比我的复杂得多，在某种程度上我无法理解解决方案。我看到他已经实现了 box-sizing，而他以前没有，但我已经有了 box-sizing 但它不起作用。

重申一下，我的问题是我想要在 html 标签中设置的 bg 图像上有一个灰色阴影区域来填充屏幕，但我想要在阴影区域之前有一个小的填充，所以图像有一个外缘那是完全彩色的。只要内容没有到达窗口底部，这就完全可以正常工作。当它确实到达窗口底部，并且包含一个滚动条时，我制作的边缘不会显示......仅在底部......非常烦人和困惑。

我的样式.css:

html {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    font-size: 18px;
}

body {
height: 100%;
margin: 0px;

padding: 8px; ##This is not preserved when the content is longer than the window, ie: scrollbar is needed. WHY?!?

-moz-box-sizing: border-box;
box-sizing: border-box;
}

div.shade {
background-color: rgba(0,0,0,0.6);
padding: 8px;
min-height: 100%;

-moz-box-sizing: border-box;
box-sizing: border-box;
}

//Sub-elements truncated, these shouldn't matter for this example.

有人可以帮我看看我做错了什么，以一种只改变达到预期效果所需的方式吗？谢谢!

PS:如果有什么没有意义的代码(什么都不做)，也请告诉我。

修复它的最佳跨浏览器答案投票最高。试图更好地掌握 CSS。谢谢!

fiddle : http://jsfiddle.net/g263pff3/

Answer 1

以下是解决方案的详细信息(来自上面的头脑 Storm 评论)，它仅使用 CSS，没有 hack，并且是跨浏览器兼容的。 JSFiddle

代码与您的原始示例很接近，但主要更改是一个新的 <div class="wrapper">添加了 CSS display:table , <div class="shade">现在有CSS display:table-cell ，全屏背景被添加到新的包装器中。

HTML

<div class="wrapper">
<div class="shade">
<div class="content">
<p>Testing content area. I certainly hope this content doesnt reach the end of the page, or my CSS will mess up. Try seeing this by resizing the window or something?</p>
<p>Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text. Filler Text.</p>
</div>
</div>
</div>

CSS

html {
    height:100%;
    margin:0;
    padding:0;
    border:none;
    font-size:18px;
}
body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
}
.wrapper {
    height:100%;
    display:table;
    border-spacing:18px;
    /* can use the padding below with border-box, instead of the border-spacing
    padding:8px; 
    -moz-box-sizing: border-box;
    box-sizing:border-box; */
    background:url(http://i.imgur.com/OaE8VAj.jpg);
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
}
div.shade {
    padding:15px;
    background-color:rgba(0, 0, 0, 0.6);
    display:table-cell;    
}
div.content {
    background-color: rgba(240,240,240,.7);
    width: 80%; 
    margin: 0px auto 0px auto;
    padding: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -khtml-border-radius: 10px;
}

---

注意:CSS 表格显示与 HTML 表格不同，需要注意的一些小事是如果元素需要绝对定位在单元格中，它需要在通用“包装器”div 中，并且没有列或行跨度。它具有很好的浏览器兼容性，http://caniuse.com/#feat=css-table ，除了较旧的 IE6 和 IE7，如果需要，还有一个 polyfill 或 IE 条件注释可以针对 2 个旧浏览器。