HTML-div внутри тела, изменяющего размер всей страницы

Я разрабатываю страницу для своего блога, и я обнаружил, что когда у меня есть div.page-content в пределах body, она сжимает и изменяет размер всего body на вершину div ... Мне нужно body, чтобы заполнить область просмотра независимо от того, что.HTML-div внутри тела, изменяющего размер всей страницы

Соответствующие HTML

<body> 
    <div class="page-content"> <!-- THIS IS MY .page-content DIV --> 
     asdasd 
    </div> 
</body>

Соответствующий CSS

body, html { 
    height: 100%; width: 100%; /* Shouldn't this make the page guaranteed to fill the viewport? */ 
    margin: 0; padding: 0; 
    background-color: #fdfdfd; 
    font-family: Roboto, Arial; 
    color: #424242; 
    background-repeat: no-repeat; 
    background-size: cover; /* I'm gonna have a blurred background image */ 
} 

.page-content { 
    min-height: 300px; width: 600px; 
    margin: 60px auto 30px auto; 
    background-color: blue; 
}

JSFiddle: http://jsfiddle.net/deansheather/5et5kgsn/

Я не имею представление о том, есть ли Javascript способ исправить это, но я 'd предпочитают CSS и HTML, только ответы, пожалуйста.

Прошу прощения за действительно странное объяснение, это то, что попало мне в голову.

источник

2015-10-24 deansheather

Вы должны установить высоту класса .page-content для auto. Подумайте над вашей проблемой. Поделитесь этим:

body, html { 
    margin: 0; padding: 0; 
    background-color: #fdfdfd; 
    font-family: Roboto, Arial; 
    color: #424242; 
    background-repeat: no-repeat; 
    background-size: cover; /* I'm gonna have a blurred background image */ 
}  
.page-content { 
     min-height: 300px; width: 600px; height: auto; 
     margin: 60px auto 30px auto; 
     background-color: blue; 
    }

источник

2015-10-24 05:36:58

Извините, но это не сработало для меня вообще. Проблема все еще происходит. Проверьте тот же Codepen, что и вопрос: http://codepen.io/deansheather/pen/vNdqGy. – deansheather

Мне нужно, чтобы область просмотра была заполнена тегом ''. – deansheather

https://jsfiddle.net/frayne_konok/64uzsus6/ –

HTML-div внутри тела, изменяющего размер всей страницы

ответ

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