Как я могу увеличить div до 100% высоты страницы? - PullRequest
Новая
       12

Как я могу увеличить div до 100% высоты страницы?

3 голосов
/ 04 июня 2009 
<html>
    <head>
        <style>
            .100PercentHeight{ }
        </style>

        </style>

    <body>
        <div class='100PercentHeight'>hihi</div>
    </body>
</html>

Как мне увеличить div до 100% высоты страницы?

Ответы [ 10 ]

8 голосов
/ 04 июня 2009

Попробуйте (это должно работать в большинстве браузеров): 

.100PercentHeight, html, body {
    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */
}
6 голосов
/ 04 июня 2009

Применение 

html, body, .100PercentHeight{
    height:100%;
}

должно дать эффект, который вы ищете. Вам нужно это на всех трех.

Тем не менее, он часто не делает то, что вы думаете, и может быть проблематичным. Методы искусственных столбцов или «липкие нижние колонтитулы», как правило, работают лучше.

1 голос
/ 13 июня 2016

Вот самое простое из известных мне решений. К сожалению, однако, он не работает в Internet Explorer 8 и более ранних версиях, поскольку они не поддерживают модуль vh (высота области просмотра). 

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

#full-height{
  min-height: 100vh;
}
</style>
</head>
<body>
<div id='full-height'>

</div>
</body>
</html>
1 голос
/ 27 июня 2012 
html {
    height: 100%;
}

Это не будет работать, если у вас есть DOCTYPE. Я тоже ищу ответ, но у меня есть DOCTYPE. Тем не менее, есть способ сделать это с DOCTYPE, но он не работает с двумя div, плавающими влево и вправо рядом друг с другом, попробуйте: 

(div-name) {
    position: absolute;
}

Имейте в виду, что это не выглядит хорошо при использовании двух div, плавающих рядом друг с другом. Но он отлично работает для любого другого типа.

1 голос
/ 04 июня 2009

Если вы хотите сделать это через JavaScript, этот код должен работать для большинства браузеров DOM ... 

<div id="fullDiv" style="border: solid 2px black;">
    Hello example
</div>

<script type="text/javascript">

    var div = document.getElementById('fullDiv');

    div.style.height = document.documentElement.clientHeight + 'px';

</script>
1 голос
/ 04 июня 2009

Использование: 

{
    position: absolute;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
}

Таким образом, он будет центрироваться и покрывать страницу, если он длиннее, чем один просмотр в браузере.

1 голос
/ 04 июня 2009

Это будет работать, как пример. 

<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
  test
</div>
1 голос
/ 04 июня 2009

Вы должны установить 100% рост для тела, и это должно сделать: 

body {
...
height:100%;
...
}
1 голос
/ 04 июня 2009 
<style>
.100PercentHeight{margin:0; height:100%}

</style>
0 голосов
/ 04 июня 2009

Это должно работать: 

<style type="text/css">
    html, body, .100PercentHeight {
        height: 100%;
        margin: -10px 0px 0px -10px;
    }
</style>

Однако вы можете добавить цвет фона или рамку, чтобы убедиться, что он работает, иначе вы не сможете его правильно увидеть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...