Что вызывает две полосы прокрутки?

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

Это потому, что большинство, если не все, браузеры имеют по умолчанию margin из 8px на элементе body.

При наличии этого поля по умолчанию высота браузера не больше 100%. Таким образом, имеется полоса прокрутки.

В частности, вы даете .parent элемент высотой 100%. В дополнение к полям 8px (верхний + нижний) имеется избыток пространства.

100% + 16px! = 100%.

В вашем втором примере использование

* { 
    margin: 0;  
    padding: 0; 
}

..effectively удаляет запас по умолчанию.

Вы могли просто использовать

body { 
    margin: 0; 
}

..для одних и тех же результатов.

источник

2014-12-29 00:01:13

Что вызывает две полосы прокрутки?

ответ

Смежные вопросы