У меня два div:
<div class="header">
</div>
<div class="scroll">
</div>
"header" - это фиксированный размер (40 пикселей), а "прокрутка" - боковая панель с полосой прокрутки. Я хочу, чтобы "прокрутка" заполнила всю высоту, которая доступна, между "заголовком" и нижней частью экрана. Но если я устанавливаю высоту 100% или 100vh на "прокрутку", она заполняет высоту, но также занимает 40 пикселей больше, что не помещается на экране, поэтому полоса прокрутки также отображается в браузере, хотя div "scroll" имеет собственную полосу прокрутки.
Я бы дал .scroll
элемента .scroll
position:absolute;
вот так: Fiddle Demo
HTML
<div class="container">
<div class="header"></div>
<div class="scroll"></div>
</div>
CSS
.container {
background-color:yellow;
position:relative;
height:500px;
}
.header {
background-color:red;
height:40px;
}
.scroll {
width:100px;
position:absolute;
top:40px;
bottom:0px;
left:0px;
background-color:blue;
}
Это можно сделать двумя способами.
div {
width: calc (100% - 40px);
}
или
div {
margin: 40px 0 0 40px;
}
это пометит верхнюю и левую стороны. предполагая, что это полосы прокрутки. Если вы хотите просто поместить верхние 40 пикс, тогда сделайте
div {
margin-top: 40px;
}
Если вы хотите, вы можете использовать CSS3 calc
.
width: calc(100% - 40px);
Но будьте осторожны, что не все браузеры поддерживают это (пока).
См. Http://caniuse.com/calc, чтобы просмотреть поддержку браузера для calc
.
width: calc(100% - 40px);
? (Хотя CSS3)