Как сделать высоту действительно 100%

Question

в CSS, когда вы устанавливаете ширину или высоту чего-либо на 100%, в действительности это только 100% окна браузера. Есть ли способ сделать это 100% всей страницы?

Позвольте мне перефразировать: я хочу, чтобы этот элемент (div) занимал ВСЮ страницу, независимо от того, сколько вы прокручиваете. Родительские элементы с размером 100% и шириной 100% не работают, потому что они обрабатываются одинаково. Я начинаю думать, что мне, возможно, придется использовать JS, чтобы получить высоту страницы, а затем точно определить это.

Answer 1

Просто примените положение: фиксированное к элементу. Если это оверлей:

#overlay 
{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%; 
}

Примечание: исправлено не поддерживается IE6

Answer 2

Я буду отвечать на все вопросы .... Вам нужно создать стиль для body и применить поле: 0; обивка: 0;

как это:

body{
 margin:0;
 padding:0;
}

после этого вы можете применить width:100% и height:100% к каждому DIV, который вам нравится.

удачи

Answer 3

100% ширина будет шириной окна браузера, если элемент не имеет абсолютного размера (например, 600 пикселей) или содержится в элементе другого размера.

Высота страницы определяется тем, сколько места занимает содержимое по вертикали.

Так что, если вы хотите, чтобы что-то занимало определенное пространство, создайте элемент (то есть <div>), ширина и высота которого установлены в пикселях или ems, тогда элементы внутри него, заданные равными 100%, заполнятся до что.

Answer 4

Когда вы устанавливаете ширину или высоту в 100%, это 100% от размера его родительского элемента. Итак, вам нужен элемент вокруг всего содержимого страницы и установите размер дочернего элемента в этом элементе.

Edit:
Если вы установите высоту самого внешнего элемента в теле на 100%, то, что произойдет, зависит от используемой версии разметки. В HTML родительским элементом элемента body является область просмотра, а высота по умолчанию равна 100%, поэтому вашим элементом будет размер окна. В XHTML родительским элементом элемента body является элемент html, а высотой элемента body является высота фактического содержимого на странице.

Answer 5

Зависит от того, что если вы поместите какой-нибудь элемент в div, а таблица / div и высота div - допустим, 500px, то элемент внутри него с высотой 100% будет равен этому div.

Если вы хотите, чтобы какой-то элемент помещался на всю страницу, вам нужно поместить его в элемент, имеющий фактическую 100% -ную ширину браузера, например, это обычно главная таблица или родительский div.

EDIT:

Я не пробовал ниже, но вы также можете сделать это, используя абсолютное позиционирование:

<style type="text/css">
div
{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
</style>

Но такой подход не всегда идеален. Если вы уверены, вы можете реализовать это:)

Answer 6

Если это наложение, вы можете рассмотреть следующий фрагмент CSS:

#overlay 
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Это предполагает, что на странице есть другие элементы для определения ее размеров