gpt4 book ai didi

添加边距时 CSS Body 更高

转载 作者:行者123 更新时间:2023-12-02 04:39:24 29 4
gpt4 key购买 nike

我有一个 DIV #page,如果我在顶部添加边距,突然出现一个滚动条,即使该元素不大于主体。我怎样才能去掉滚动条?

(参见 Fiddle)

我的 HTML

<html>
<body>
<div id="page">
I am a div sized with calc()!
</div>

</body>
</html>

我的 CSS

html, body {
height:100%;
}
body {
margin:0;
padding:0 10px 0 10px;
font-family:helvetica;
background:black;
color:yellow;
}
#page {
position:relative;
min-height:90%;
min-height:calc(100% - 60px);
width:100px;
padding:10px;
margin:20px auto;
background-color:rgba(255,255,255,.2);
}

最佳答案

问题:body 默认为position:static。向直接子级添加边距将导致它按比例移动,而不管其高度如何。

解决方案:为 body 提供 position:fixed,以防止移动和删除滚动条。

演示: http://jsfiddle.net/abhitalks/mZKC5/18/

CSS:

html, body {
height: 100%; width: 100%;
}
body {
position: fixed; /* important to keep it fixed */
margin: 0; padding: 0px 10px;
font-family: helvetica;
background: black; color: yellow;
}
#page {
height: calc(100% - 60px); /* 10+10 padding + 20+20 margin = 60px is ok */
width: 100px;
padding: 10px;
margin: 20px auto;
background-color: rgba(255, 255, 255, .2);
}

编辑:(根据@AWolff 的建议)

上面的演示显示的是当 margin 应用于直接子级时 body 滚动的原因。但是,作为使 body fixed 的副作用是它根本不再可滚动,即使您想要添加更多相关内容也是如此。

如果您需要像素完美,更好的解决方案是使用绝对定位来放置元素。

或者,按照@NoobEditors 的建议使用相对 positioning 而不是 margins,因为它无论如何都会相对于 body (即使这是绝对的)。

.

关于添加边距时 CSS Body 更高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21204403/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com