在设计布局时,我将html, body元素设置为height,100%但在某些情况下,这会失败,那么应该使用什么？
html, body {
height: 100%;
}
要么
html, body {
min-height: 100%;
}
嗯,这不是基于意见的,因为每种方法都有自己的缺陷,那么推荐的方法是什么？为什么？
http://jsfiddle.net/julien_c/GmAL4/
我发现如果你应用CSS背景body,它会占用整个页面(无论实际的高度或宽度body是多少).
但是,如果应用CSS背景都html和body为背景body 不占用整个页面.
这种差异是否存在预期的行为？
如何叠加两个全屏背景(例如,背景颜色和半透明图像？)
给出这个HTML:
<body>
<div id="a"></div>
<div id="b"></div>
</body>
我想#b填充其容器块的所有剩余垂直空间,我从这开始:
body {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
所以#b是100%的高度,这意味着它正在占据其父容器块的高度,也就是说,500px问题是overflow: hidden;似乎不起作用,#b没有被剪裁.
另一方面,如果我用另一个具有上述相同属性的div进行换行#a,我得到了所需的结果:#bbody
#wrap {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
用这个HTML当然:
<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div> …我想弄清楚,为什么设置overflow-x: hidden到一个HTML页面的身体让我的元素position: fixed,即使我把它设置为position: absolute.
在此演示中可以更好地理解效果.
这是代码:
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow-x: hidden;/* If I remove this line everything is how I expect it to be! */
}
div.page {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid red;
margin-bottom: 200px;
}
div.background {
background: blue;
position: absolute;
width: 100%;
height: 10%;
}<div class='background'></div>
<div class='page'></div>
<div class='page'></div>
<div class='page'></div>
<div class='page'></div> …我想要一个背景渐变,例如
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9))
在我的文件的主体上,延伸到整个身体的高度 - 并与身体滚动.
运用
background-attachment: fixed;
我得到了(视口的)整个高度,但它保持固定.
background-attachment: scroll;
让我滚动,但它只是延伸到视口高度.
任何方式来获得两者？
编辑:
正如Boltclock指出的那样,我确实通过基本测试页面上的"background-attachment:scroll"得到了预期的行为.
同
<body>
<div id="stretch">Content</div>
</body>
和
body {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
}
#stretch {
height: 2000px;
}
一切正常:渐变遍布整个身体(身体高2000像素),并滚动内容.
然后我补充说
html,
body {
height: 100%;
}
这是页面所基于的基本模板所做的事情.
为了让身体再次扩张,我补充说
height: auto;
身体恢复到2000px的高度.
但是,渐变保持在HTML高度 - 然后重复.
我在这里错过了什么？