div высота, чтобы заполнить всю страницу

У меня есть div, и я хочу, чтобы он заполнил всю страницу без горизонтальной или вертикальной прокрутки.div высота, чтобы заполнить всю страницу

HTML, это как:

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

и CSS-код, как:

body{ 
    background: #222; 
    margin:0; 
    padding: 0; 
} 
.container{ 
    margin:0 auto; 
    padding:20px; 
    width:800px; 
    background: rgba(20,20,20,0.2); 
    height: 100vh; 
}

Обычно с vh это работает, но из-за какого-то дополнения, нанесенного на контейнер не работает. Итак, какую технику я могу использовать для решения этой проблемы?

The JSFiddle is here

источник

2015-05-11 Blaise M.

Попробуйте использовать box-sizing: border-box на вашем .container элемента. При этом будет добавлена и граница элемента, включенного с назначением ширины и высоты.

.container { 
    box-sizing: border-box; 
    margin: 0 auto; 
    padding: 20px; 
    width: 800px; 
    background: rgba(20,20,20,0.2); 
    height: 100vh; 
}

источник

2015-05-11 16:26:22 hungerstar

Это связано с the way that css adds the padding to the height рассчитать общую высоту. Там в один быстрый и гибкий фикс для всех ваших элементов, хотя, как объяснено в Paul Irish's box-sizing:

/* apply a natural box layout model to all elements, but allowing components to change */ 
html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

источник

2015-05-11 16:27:13

Не уверен, что это поможет вам, но вы можете дать ему пытаясь угадать

дают положение относительно вашего тела и позиция, закрепленная на вашем div.container с шириной 100% и высотой 100%.

body{ 
    background: #222; 
    margin:0; 
    padding: 0; 
    position:relative; 
} 
.container{ 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    background: red; 
    height: 100%; 
}

источник

2015-05-11 16:34:16 rajatsaurastri

Это может быть возможным решением, если вместо того, чтобы содержание было установлено в соответствии с шириной ОП было использование, а также по центру элемента. – hungerstar

Box-sizing FTW! Если вам нужно включать отступы как часть размеров элементов, то box-sizing: border-box ваша единственная надежда.

FWIW вы должны знать, что Viewport Units are not fully supported так что если вам нужно что-то более кросс-браузер вы можете легко избежать с помощью 100vh с помощью 100% вместо этого.

например:

html, body { 
 
    height:100%; 
 
    min-height:100%; 
 
} 
 
body{ 
 
    background: #222; 
 
    margin:0; 
 
    padding: 0; 
 
} 
 
.container{ 
 
    margin:0 auto; 
 
    padding:20px; 
 
    width:800px; 
 
    background: red; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 

 
</div>

источник

2015-05-11 16:36:41 Moob

div высота, чтобы заполнить всю страницу

ответ

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