Question

我有一个包含以下CSS的HTML页面：

html {
  margin: 0;
  position: fixed;
  width: 100%;
  height: 100%;
}
body {
  margin: 5rem;
  width: 100%; 
  height: 100%;
  position: relative;
}

当我检查Chrome中的body元素时，我只能＆＃34;看到＆＃34;边距适用于左侧和顶部。底部和右侧似乎正在强制关闭页面/布局。这导致我的一些内在内容（在体内）被切断了一半，因为它的关闭＆＃34;屏幕。

此外，尽管添加了overflow: scroll，但在布局中的任何位置都没有显示滚动条，我无法滚动到＆＃34;隐藏＆＃34;内容。

当然，身体内部有更多元素，但布局太大/太复杂，无法在此重现。有什么需要寻找的东西可能导致布局在右侧和底部溢出？

基本上我不确定为什么边距只能在顶部和左边看到，我应该寻找什么样的CSS可能导致这种情况。

编辑::此外，如果我将body更改为margin: 2rem auto，则边距仅在＆＃34;顶部＆＃34;上显示，而不是左/下/右。

Answer 1

您的问题是100％宽度和保证金。在身体上设置100％将其设置为窗口宽度的100％，因此应用边距将身体推离右侧。在这种情况下，你的身体是窗口宽度的100％+ 10rem。您可以执行类似body{width: 90vw; margin: 5vw;}之类的操作我喜欢该解决方案，因为边距随客户端大小而变化，再加上使用vw可以更清楚地知道体宽百分比与客户端的关系。

Answer 2

html有position: fixed，与浏览器的宽度和高度相同。因此，当您在body左上边距使用边距时，只需将其内容向下推出html即可。这就是为什么你看不到它的右下边缘的原因。

示例

＆＃13;
＆＃13;
*,*::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; }
＆＃13;
<div class="html"><p>html</p> <div class="body"><p>body</p></div></div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

作为一种解决方法，您可以尝试使用此css（此处没有宽度或高度）：

{{1}}

Answer 4

听起来你正试图为你的页面制作窗口/框架外观。看一下这个片段。您需要将box-sizing:border-box设置为body元素，并将边距更改为填充。然后，您将希望使用诸如div之类的元素作为内容容器。将该容器设置为height:100%和overflow:scroll;。

＆＃13;

html {
  margin: 0;
  position: fixed;
  width: 100%;
  height: 100%;
}
body {
  padding: 5rem;
  width: 100%; 
  height: 100%;
  position: relative;
  box-sizing:border-box;
}
div {
    background: teal none repeat scroll 0 0;
    box-sizing: border-box;
    height: 100%;
    overflow: scroll;
}

＆＃13;

<html>
  <body>
    <div>Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /></div>
  </body>
</html>

＆＃13;

什么CSS可能导致页面边距在底部/右侧中断？

4 个答案: