什么CSS可能会导致页面页边空白在底部/右侧？

我有下面的CSS的HTML页面：什么CSS可能会导致页面页边空白在底部/右侧？

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

当我检查在Chrome中body元素，我只能“看”的左边和顶部被应用的空白。底部和右侧似乎强制关闭页面/布局。这导致我的一些内容（身体内部）被截断，因为它在屏幕上“关闭”。

此外，没有滚动条出现在任何地方的布局，尽管加入overflow: scroll，我不能滚动到“隐藏”的内容。

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

基本上我不清楚，为什么利润率只有在顶部和左侧，什么CSS的样，我应该寻找那些可能会导致此可见。

编辑::此外，如果我更改body有margin: 2rem auto，保证金只在“顶部”，而不是左/底部/右侧可见。

来源

2015-07-20 Prefix

我们可以看到一个例子吗？或小提琴？ –

我想弄清楚如何在此刻模拟一个小提琴，这个页面相当沉重/复杂，所以我不确定我是否能够获得准确的娱乐：/大多只是寻找提示，以寻找什么当调试常见的布局错误 – Prefix

检查我的小提琴，我认为这是你想要的？ –

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>

来源

2015-07-20 21:41:34

如果我用填充替换边距，它仍然会出现。基本上我只是试图在窗口周围放置一个5rem缓冲区 - 有没有更好的方法来做到这一点？ – Prefix

如果你在'body'上使用'box-sizing：border-box'和'padding'，那么它应该可以工作。 –

这个伎俩。我以为我的CSS重置已将所有内容都设置为'border-box'，但显然不是！谢谢 – Prefix

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

来源

2015-07-20 21:35:22

作为一种变通方法，您可以尝试使用这个CSS（无宽度或高度这里）：

body { 
     top: 5rem; 
     right: 5rem; 
     bottom: 5rem; 
     left: 5rem; 
     position: absolute; 
}

来源

2015-07-20 22:13:21 Vado

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

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; 
 
}

<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>

来源

2015-07-21 00:47:42 IMI

什么CSS可能会导致页面页边空白在底部/右侧？

回答

相关问题