什麼導致兩個滾動條在這裏？

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 


.parent { 
    height: 100vh; 
    overflow: auto; 
} 

.first { 
    height: 100vh; 
} 
.second { 
    height: 100vh; 
} 
</style> 
</head> 
<body> 


<div class="parent"> 
    <div class="first"> 
    <h1>haha</h1> 
    </div> 
    <div class="second"> 
    <h1>haha</h1> 
    </div> 
</div> 


</body> 
</html>

演示：http://codepen.io/anon/pen/zxKmyq 什麼導致兩個滾動條在這裏？

這個代碼將會給在左邊的兩個滾動條。

但是，如果我們的代碼更改爲

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 


* { <!-- this is the only modification I made compared to the first code --> 
    margin:0;  
    padding:0; 
} 

.parent { 
    height: 100vh; 
    overflow: auto; 
} 

.first { 
    height: 100vh; 
} 
.second { 
    height: 100vh; 
} 
</style> 
</head> 
<body> 


<div class="parent"> 
    <div class="first"> 
    <h1>haha</h1> 
    </div> 
    <div class="second"> 
    <h1>haha</h1> 
    </div> 
</div> 


</body> 
</html>

演示：http://codepen.io/anon/pen/gbwBQK

然後有將只有一個滾動條，這是可取的。

但我不知道這是如何工作的，即爲什麼這個簡單的修改會改變滾動條。

來源

2014-12-28 user2901156

那麼你的問題是什麼？請明確點。 – simeg

這是因爲大多數（即使不是全部）瀏覽器在body元素上的默認margin爲8px。

當此默認邊距存在時，瀏覽器的高度不再是100%。因此，存在滾動條。

更具體地說，您要給.parent元素設置瀏覽器的高度100%。除了8px（頂部+底部）邊距之外，還有一些空間過剩。

100% + 16px！= 100%。

在第二個例子中，

* { 
    margin: 0;  
    padding: 0; 
}

使用..effectively刪除此預設保證金。

您可以僅僅使用

body { 
    margin: 0; 
}

..for相同的結果。

來源

2014-12-29 00:01:13

什麼導致兩個滾動條在這裏？

回答

相關問題