身高100％顯示垂直滾動條

出於好奇，考慮下面的例子，爲什麼在#container div上的邊距會導致垂直滾動條出現在瀏覽器中？該容器的高度比設定爲100％的身高小得多。身高100％顯示垂直滾動條

我已經爲除#container之外的所有元素設置了填充和邊距爲0。請注意，我故意忽略#container div上的絕對定位。在這種情況下，瀏覽器如何計算身體的高度以及邊緣如何影響身體？

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
* { padding:0; margin:0;} 
html, body { height:100%; } 
#container 
{ 
    padding:10px; 
    margin:50px; 
    border:1px solid black; 
    width: 200px; 
    height: 100px; 
} 
</style> 
</head> 
<body> 
    <div id='container'> 
    </div> 
</body> 
</html>

例也JSFiddle

來源

2012-10-20 neodymium

另請參閱http://stackoverflow.com/questions/34357434/html-body-100-causing-scrollbar-to-appear –

If you paint the backgrounds of html and body (giving each its own color)，你很快就會發現，body正在與#container一起向下移動，並且#container本身不是從body在所有頂偏。這是margin collapse的一個副作用，我詳細討論了here（儘管該答案描述了一個稍微不同的設置）。

這就是導致滾動條出現的行爲，因爲您聲明body的高度爲100％，高度爲html。請注意，body的實際高度不受影響，因爲邊距永遠不會包含在高度計算中。

來源

2012-10-20 15:36:06 BoltClock

這是否意味着頁面元素的高度是從窗口開始計算的，然後身體，然後元素內部或身體上方？所有百分比都轉換爲px或pt或em值嗎？ – TMB

@TMB：'html'上的100％高度使其成爲視口（瀏覽器的可視區域）的100％，而'body'上的100％高度使其成爲其父'html'的100％。以下任何百分比都是元素祖先的百分比。如果你沒有在'html'或'body'上設置100％的高度，那麼它們的行爲就像任何其他的塊元素一樣。有關詳細信息，請參閱http://www.w3.org/TR/CSS21/syndata.html#percentage-units。在渲染過程中，％s和ems最終都必須轉換爲絕對值，以便瀏覽器準確知道在屏幕上測量和渲染事物的大小。 – BoltClock

@TMB：在jsFiddle的情況下，視窗的高度與「結果」窗格的高度相同，因爲它基本上是一個iframe。 – BoltClock

-7

我找到了一個快速的解決方案：嘗試設置高度99.99％，而不是100％

來源

2013-12-08 11:57:12 user1254226

它聽起來不太好。身體被默認移動 – speedingdeer

這是一個糟糕的想法有很多原因，包括每個用戶窗口的任意高度差異，以及內部舍入方法因瀏覽器而異。 –

有點晚，但也許它可以幫助別人。

添加float: left;到#container刪除滾動條，如W3C說：

•一個浮動框和任何其他箱之間邊距不折疊（甚至一個浮動及其在流動兒童之間）。

來源

2014-03-04 08:37:00 Michel

將overflow: hidden;添加到html和body。

html, body { 
    height: 100%; 
    overflow: hidden; 
}

來源

2015-07-25 15:23:18 NexusRex

+21

該解決方案完全移除滾動條。即使在需要滾動的頁面上也是如此 – Vil

第一行中的錯字溢出：被隱藏 –

基於@ BoltClock♦的回答，我由零保證金固定它...
所以

html,body, #st-full-pg { 
    height: 100%; 
    margin: 0; 
}

作品，其中ID爲「ST-全PG」被分配給一個面板DIV（其中還含有面板的標題和板體）

來源

2017-01-04 11:05:30 harshvchawla

html, body { 
    height: 100%; 
    overflow: hidden; 
}

如果你想清除體內滾動添加以下樣式：

body { 
    height: 100%; 
    overflow: hidden; 
}

來源

2017-03-23 08:37:47

這解決了我的問題，我有2個垂直滾動條。將html設置爲「overflow：hidden」並單獨修正它。我的身體和html都有'身高：100％'。 – Karai17

我看到這個問題之前，你把body的所有內容放在一個叫wrap的div裏。包裹的樣式應設置爲position: relative; min-height: 100%;。要從上面放置#container div 50px，並將內部包裝的div設置爲50px的填充。邊距不能用於包裝和我們剛剛製作的div，但它們將在#container以及其中的所有內容中起作用。

here's my fix on jsfiddle。

來源

2017-05-28 05:08:05 TheZacher5645

html,body { 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
}

這爲我工作

來源

2017-10-13 20:06:49 fjkjava

添加float:left;是好的，但使用margin:auto;

，如果你知道你的利潤率有多大是與中心水平定位會產生干擾，你可以考慮在你的身高用百分比計算：

height: calc(100% - 50px);

瀏覽器的支持還是不錯的，但只有IE11 + https://caniuse.com/#feat=calc

來源

2017-10-20 11:03:39

身高100％顯示垂直滾動條

回答

相關問題