Вертикальная полоса прокрутки появляется по неизвестной причине

Что должно появиться здесь? http://codepen.io/anon/pen/QGByOQ?editors=1100 Вертикальная полоса прокрутки появляется по неизвестной причине

Как я полагаю, .container является 100% высота body, тело наследует html, html составляет 100% от viewport, следовательно, каждый .chart должна соответствовать отлично, как его высота составляет половину от .container годов. Тем не менее появляется панель y-scrollbar. Каково поведение этого?

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <div class="container"> 
     <div class="chart1"></div> 
     <div class="chart1"></div> 
     <div class="chart1"></div> 
     <div class="chart1"></div> 
    </div> 
</body> 
</html>

CSS:

.container { 
    width: 100%; 
    height: 100%; 
    border: 5px dashed black; 
    box-sizing: border-box; 
    font-size: 0; 
    overflow: auto; 
} 

html, body { 
    height: 100%; 
} 

body { 
    margin: 0; 
} 

.chart1 { 
    display: inline-block; 
    width: 50%; 
    height: 50%; 
    border: 1px solid red; 
    box-sizing: border-box; 
}

источник

2016-12-09 Oscar

Ваш код не показывает вертикальную полосу прокрутки ... вы уже решили проблему? – kukkuz

Это связано с красной границы контейнера. Использование CSS calc() функции, как:

.chart1 { 
    height: calc(100% - 1px); /* 1px for the extra border */ 
}

Посмотрите на ниже фрагменте кода:

.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 5px dashed black; 
 
    box-sizing: border-box; 
 
    font-size: 0; 
 
    overflow: auto; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.chart1 { 
 
    display: inline-block; 
 
    width: 50%; 
 
    height: calc(50% - 1px); 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="chart1"></div> 
 
    <div class="chart1"></div> 
 
    <div class="chart1"></div> 
 
    <div class="chart1"></div> 
 
</div>

Надежда это помогает!

источник

2016-12-09 15:02:16

Я думаю, это должно быть -2 пикселя для каждого div. becaust верхняя и нижняя граница – Kebeng

Вертикальная полоса прокрутки появляется по неизвестной причине

ответ

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