Page Wrap不采取最小高度 [英] Page Wrap not taking min-height

问题描述

我有以下代码：

  html，body {
 height：100％; 
 font-style：Helvetica; 
} 
 .page_background，.page {margin：0 auto; } 
 .page_background {
 width：100％; 
最低身高：100％; 
 background：-webkit-linear-gradient（＃282828，＃888888）; / *对于Safari 5.1至6.0 * / 
背景：-o-linear-gradient（＃282828，＃888888）; / * Opera 11.1至12.0 * / 
背景：-moz-linear-gradient（＃282828，＃888888）; / *对于Firefox 3.6至15 * / 
背景：线性渐变（＃282828，＃888888）; / *标准语法* / 
位置：绝对; 
 / * height：100％; * / 
} 
 .page {
 background-color：#FFFFFF; 
宽度：85％; 
最低身高：100％; 
 bottom：0; 
位置：绝对; 
身高：100％;剩下
：7.5％; 
} 
 
< div class =page_background> 
< div class =page> 
< / div> 
< / div> 
  

如果页面经过屏幕的整个高度（您必须滚动）背景颜色不适用。我有 min-height：100％; 设置并试过 height：100％; 。两人似乎都无法工作。我在做什么错了？ 您只需要重置默认浏览器样式 - 边距，就像这样

  html，body {
 height：100％; 
 font-style：Helvetica; 
保证金：0; 
} 
  

https://jsfiddle.net/b0txv2m2/5/

I have the following code

html ,body {
    height: 100%;
    font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
    width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
    position: absolute;
    /*height: 100%;*/
}
.page {
    background-color: #FFFFFF;
    width: 85%;
    min-height: 100%;
    bottom: 0;
    position: absolute;
    height: 100%;
    left: 7.5%;
}

        <div class="page_background">
            <div class="page">
            </div>
        </div>

That if the page goes past the full height of the screen (you have to scroll) the background color does not apply. I have min-height: 100%; set and tried height: 100%;. Neither one seem to work. What am I doing wrong?

解决方案

You just need to reset default browser styles - margins, like this

html ,body {
  height: 100%;
  font-style: Helvetica;
  margin :0;
}

https://jsfiddle.net/b0txv2m2/5/

这篇关于Page Wrap不采取最小高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！