我有一个包含以下 CSS 的 HTML 页面:
html {
margin: 0;
position: fixed;
width: 100%;
height: 100%;
}
body {
margin: 5rem;
width: 100%;
height: 100%;
position: relative;
}
当我检查 Chrome 中的 body
元素时,我只能“看到”在左侧和顶部应用的边距。底部和右侧似乎迫使页面/布局。这导致我的一些内部内容(inside body)被截断一半,因为它“离开”了屏幕。
此外,尽管添加了 overflow: scroll
,但布局中的任何地方都没有出现滚动条,我无法滚动到“隐藏”的内容。
当然,body 里面还有更多的元素,但是布局太大/太复杂,无法在这里重现。需要注意哪些可能导致布局在右侧和底部溢出的问题?
基本上我不确定为什么边距只在顶部和左侧可见,我应该寻找哪种 CSS 可能会导致这种情况。
EDIT::此外,如果我将 body
更改为 margin: 2rem auto
,边距仅在“顶部”可见,而不是在左/下/右.
最佳答案
html
具有 position: fixed
并且与浏览器的宽度和高度相同。因此,当您在 body
上使用边距时,顶部和左侧边距只需将其内容向下推到 html
之外。这就是为什么您看不到它的底部和右边距的原因。
示例
*,*::before,*::after { box-sizing: border-box; }
.html {
position: fixed;
width: 100%;
height: 100%;
background-color: orange;
font-size: 2rem;
}
.body {
position: relative;
width: 100%;
height: 100%;
margin: 5rem;
background-color: #000;
color: #FFF;
font-size: 2rem;
}
.body::before,
.body::after {
position: absolute;
border: solid 5px;
font-size: 1rem;
}
.body::before {
content: "body top-margin";
width: 100%;
height: 5rem;
bottom: 100%;
border-top: none;
}
.body::after {
content: "body left-margin";
width: 5rem;
height: 100%;
right: 100%;
border-left: none;
}
p {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
<div class="html"><p>html</p>
<div class="body"><p>body</p></div></div>
关于html - 什么 CSS 会导致页边距在底部/右侧中断?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31525985/