什麼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可能會導致頁面頁邊空白在底部/右側？

回答

相關問題