Как сделать так, чтобы окно заполняло всю веб-страницу во всех браузерах? - PullRequest
Новая
       0

Как сделать так, чтобы окно заполняло всю веб-страницу во всех браузерах?

5 голосов
/ 26 октября 2011

Я создал веб-страницу со следующим кодом и просмотрел ее в Google Chrome. 

<html>
<head>
        <style type="text/css">
                html {padding:30px; background-color:blue;}
                body {margin:0px; background-color:red;}
        </style>
</head>
<body>
hello world
</body>
</html>

Результат - то, что я ожидал, красное поле с синей рамкой 30 пикселей, которое заполняет все окно веб-браузера. Тем не менее, когда я смотрю его в Firefox, красный прямоугольник имеет высоту только одну высоту строки. В IE8 синяя рамка отсутствует.

Как сделать так, чтобы Firefox и IE8 отображали то же, что и в Google Chrome?

Дополнительные примечания Я пытался добавить различные теги doctype на страницу, но это только сделало его похожим на Firefox, то есть высотой 1 строки красного цвета.

Ответы [ 3 ]

2 голосов
/ 26 октября 2011

Для этого я думаю, что вы должны прибегнуть к абсолютному или относительному позиционированию;в противном случае ваша комбинация высоты / поля будет вытеснять нижнюю синюю линию с экрана.Это работает кросс-браузер для этого простого случая.Надеюсь, это подойдет для вашего более сложного варианта использования. 

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body { background:blue; }
      .first{
        position:absolute; /* fixed also works */
        background:red;
        top:30px;
        left:30px;
        right:30px;
        bottom:30px;
      }
    </style>  
  </head>
  <body>
    <div class="first">hello world</div>
  </body> 
</html>
2 голосов
/ 26 октября 2011

если я правильно вас понимаю, установите html и ширину тела на 100%, высоту 100%

http://jsfiddle.net/Diezel23/Lv6Vw/#base

0 голосов
/ 26 октября 2011

Вы можете добавить дополнительный div: 

<html>
    <head>
        <style>
            body {
                padding: 30px;
                margin: 0px;
            }
            div {
                width: 100%;
                height: 100%;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            ABC
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...