Содержимое переполняется из div со 100% высотой

Когда я просматриваю эту страницу в Chrome, Firefox или IE11, я замечаю, что при горизонтальном изменении размера окна до минимальной ширины происходит переполнение текста из белого фона div внизу страница. Разница установлена на высоту 100%, поэтому не должна ли она соответствовать высоте страницы? Может показаться, что 100% соответствует только высоте окна, но при первоначальной загрузке страницы в Chrome я вижу, что белый div вызывает полосу прокрутки, так что на высоте окна больше свободного пространства.Содержимое переполняется из div со 100% высотой

Я попытался поставить overflow: auto; в #main css, а div закончил с полосой прокрутки. Я удалил его, так как это не решение, которое я могу принять. Как я могу заставить div автоматически разместить его контент?

<html> 
<head> 
<style> 
    body, html { 
     margin: 0; 
     padding: 0; 
    } 
    html { 
     background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed; 
     background-size: cover;  
    } 
    #main { 
     margin-left: 20%; 
     margin-right: 20%; 
     background-color: white; 
     height: 100%; 
     padding: 10%; 
    } 
</style> 
</head> 
<body> 
    <div id="main"> 
     <h1>The Road Not Taken</h1> 
     Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference. 
     <p>- Robert Frost</p> 
    </div> 
</body> 
</html>

источник

2015-01-07 ThisClark

Может быть, я неправильно, но я не вижу каких-либо полосы прокрутки при изменении размера http://codepen.io/anon/pen/PwWNeJ – jessikwa

@jessikwa я удалил переполнение: авто - Это не решение, которое я могу принять. – ThisClark

@jessikwa В кодексе я не вижу той же проблемы. Где я вижу это, когда страница создается в html-файле и просматривается локально в браузере. – ThisClark

padding испортит height: 100%. Кажется, что вычисляет высоту, а затем добавляет прокладку, поэтому результирующая высота на самом деле ближе к 120%. Я пробовал этот код в локальном html-файле, и, похоже, это трюк.

Попробуйте вместо этого:

<html> 
<head> 
<style> 
    body, html { 
     margin: 0; 
     padding: 0; 
    } 
    html { 
     background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed; 
     background-size: cover;  
    } 
    #main { 
     margin-left: 20%; 
     margin-right: 20%; 
     background-color: white; 
     height: 100%; 
    } 
    #content { 
     padding: 10%; 
    } 
</style> 
</head> 
<body> 
    <div id="main"> 
     <div id="content"> 
      <h1>The Road Not Taken</h1> 
      Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference. 
      <p>- Robert Frost</p> 
     </div> 
    </div> 
</body> 
</html>

источник

2015-01-07 22:12:28 mikelt21

Я нашел альтернативное решение - добавьте 'display: table;' в селектор '# main' и он полностью работает. Тем не менее, я подозреваю, что ваш подход лучше. Я могу прочитать о табличном представлении в другом месте, но с верхней части головы вы знаете, почему мне следует избегать отображения: table в этом случае? – ThisClark

Я честно не знаю, это достаточно хорошо, чтобы дать вам много веских причин. По моему мнению, один из них - это то, что некоторые старые браузеры не поддерживаются. Вы можете проверить ** [здесь] (http://caniuse.com/#feat=css-table) ** для совместимости. Также ** [этот сайт] (https://2002-2012.mattwilcox.net/archive/entry/id/1030/) ** предлагает спорный аргумент о том, почему 'display: table' - не очень хорошая идея. Опять же, я не знаю достаточно об этом, чтобы согласиться или не согласиться с ним, но, возможно, это поможет вам с вашим решением. Надеюсь, это поможет! =) – mikelt21

Это две большие причины, и я по-прежнему считаю, что ваш подход лучше всего. Спасибо, что вернулся ко мне. Береги себя. – ThisClark

Содержимое переполняется из div со 100% высотой

ответ

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