神秘的最低身高行为 [英] Mysterious min-height behavior
问题描述
尝试以下展示：
<!doctype html>
<html>
<head>
<style>
html {
min-height: 100%;
overflow-y: scroll;
}
body {
margin: 0;
min-height: 100%;
background: -o-linear-gradient(bottom right, rgb(230,0,230), rgb(150,0,250));
background: -webkit-gradient(linear, left top, right bottom, from(#D0F), to(#50A));
background: -moz-linear-gradient(to bottom right, indigo, violet);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb830c', endColorstr='#ffbe0d');
}
#container {
background: #0B0;
min-height: 100%;
width: 400px;
margin: 0 auto;
}
#content {
background: #A00;
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<div id="container">
<div id="content"></div>
</div>
</body>
</html>
您会认为 #container 赢得了尽管设置了最低高度：100％。
You'll reckon that #container won't stretch, despite being set with min-height: 100%.
设置 html，正文{高度：100％; } 代替 min-height：100％可以解决此问题，但随后人体背景中的渐变不再伸展了，将重复。您可以通过将 #content 设置为高于当前窗口高度来进行验证。说 #content {height：3000px; }
Setting html, body { height: 100%; } instead of min-height: 100% will solve this problem, BUT then the gradient in the body background won't stretch anymore, and it will repeat instead. You can verify this by setting #content higher than your current window height. say #content { height: 3000px; }
我可以通过设置 body {background-attachment：fixed; } ，但我希望它滚动，但这不能解决IE的问题。
所以我需要在正文和html上使用 min-height 。
I could fix it setting body { background-attachment: fixed; } but I'd like it to scroll, and this does NOT solve the problem with IE.
So I need to use min-height on body and html.
为什么不 #container 当我使用最小高度时会拉伸吗？
Why doesn't #container stretch when I use min-height?
编辑：这不是解决方案，但是添加背景色（线性渐变消失的相同颜色）也使 height：100％变通方法也适用于IE。因此，在IE中背景是滚动的，而在其他背景中则不是，渐变是线性的，而在其他方向中则是径向的。.但这确实不是什么大问题。
it's not a solution, but adding a background-color (the same color in which the linear gradient fades) makes the height:100% workaround acceptable for IE too. so in IE the background is scrolling and in the others is not, the gradient is linear and in the others' radial.. but it really isn't much of a problem.
编辑：请注意，Opera浏览器正确解释了代码。
note that Opera browser correctly interprets the code.
推荐答案
edit
这可能有帮助吗？
http://jsfiddle.net/HerrSerker / XnjRp / 3 /
我通过不滚动正文而是使用新的滚动包装器来使渐变和滚动分离，
I decoupled the gradient and the scrolling by don't scrolling the body but a new scrolling wrapper
如果每个父元素的高度已设置，因此您需要
min-height does only work correctly, if every parent element has a set height, so you need
html, body {
height: 100%;
}
洞穴：检查移动浏览器在滚动和缩放时是否遇到问题
Cave: check if mobile browsers have a problem with scrolling and or zooming with this
http://jsfiddle.net/HerrSerker/XnjRp
这篇关于神秘的最低身高行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
