it-swarm.com.ru

Граница около 100% высоты и ширины тела (HTML 4.01 Strict)

Хорошо, это сводит меня с ума прямо сейчас.

Я хочу иметь рамку вокруг моего документа. Это должно быть красиво обойти все окно/окно просмотра. Итак, я определяю:

body {
  border: 1px solid red;
}

Когда мой документ находится в режиме причуд, это работает отлично. По крайней мере, в IE, который является моей главной целью здесь. Красная граница появляется на самых краях моей страницы, очевидно, потому что с помощью предопределенных CSS body и html установлены на весь экран.

При переходе в стандартный режим с установкой строгого HTML DOCTYPE HTML 4.01, свертывания body и html до реального (меньшего) размера содержимого граница рисуется прямо через середину экрана. Итак, я определяю:

body, html {
  padding: 0px;
  margin: 0px;
  border: 0px none;
  width: 100%;
  height: 100%;
}

body {
  border: 1px solid red;
}

И я получаю - полосы прокрутки, прокручивая ровно один пиксель , чтобы показать нижнюю/правую границы. Однако я хочу, чтобы эта граница была видна сразу.

Есть ли способ без всякой ерунды (например, «высота: 99,9%;», «переполнение: скрытый» или «переключиться обратно в режим причуд»), чтобы получить границу на 100% без лишних полос прокрутки? Только с IE хорошо, кросс-браузер был бы лучше, конечно.

21
Tomalak

Как уже упоминалось в SpliFF, проблема заключается в том, что по умолчанию (W3C) блочная модель используется «content-box», в результате чего границы выходят за пределы width и height. Но вы хотите, чтобы они были в пределах 100% ширины и высоты, которые вы указали. Одним из обходных путей является выбор модели рамки с рамкой, но вы не можете сделать это в IE 6 и 7 без возврата в режим причуд.

Другое решение работает и в IE 7. Просто установите html и body на 100% высоты, а overflow на hidden, чтобы избавиться от полос прокрутки окна. Затем вам нужно вставить абсолютно позиционированный div-обертку, который получает красную рамку и все содержимое, устанавливая все четыре свойства смещения блока в 0 (чтобы граница придерживалась краев области просмотра) и overflow в auto ( поместить полосы прокрутки в div обертки).

Есть только один недостаток: IE 6 не поддерживает настройку leftиright и обоих topиbottom. Единственный обходной путь для этого - использовать CSS-выражения (в условном комментарии), чтобы явно установить ширину и высоту оболочки в соответствии с размерами области просмотра за вычетом ширины границы.

Чтобы было легче увидеть эффект, в следующем примере я увеличил ширину границы до 5 пикселей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Border around content</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #wrapper {
      position: absolute;
      overflow: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 5px solid red;
    }
  </style>
  <!--[if IE 6]>
  <style type="text/css">
    #wrapper {
      width: expression((m=document.documentElement.clientWidth-10)+'px');
      height: expression((m=document.documentElement.clientHeight-10)+'px');
    }
  </style>
  <![endif]-->
</head>
<body>
  <div id="wrapper">
    <!-- just a large div to get scrollbars -->
    <div style="width: 9999px; height: 9999px; background: #ddd"></div>
  </div>
</body>
</html>

P.S .: Я только что видел, что вам не нравится overflow: hidden, хммм ...


Update: Мне удалось обойти использование overflow: hidden, подделав границу, используя четыре элемента div, которые прилипают к краям области просмотра (вы не можете просто наложить весь экран просмотра на полноразмерный элемент div, так как все элементы под ним не будет доступен больше). Это не хорошее решение, но по крайней мере нормальные полосы прокрутки остаются в исходном положении. Мне не удалось позволить IE 6 имитировать фиксированное позиционирование с помощью выражений CSS (возникли проблемы с правым и нижним делителями), но в любом случае это выглядело ужасно, поскольку эти выражения очень дорогие и рендеринг стал утомительно медленным.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Border around content</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    #border-t, #border-b, #border-l, #border-r {
      position: fixed;
      background: red;
      z-index: 9999;
    }

    #border-t {
      left: 0;
      right: 0;
      top: 0;
      height: 5px;
    }

    #border-b {
      left: 0;
      right: 0;
      bottom: 0;
      height: 5px;
    }

    #border-l {
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
    }

    #border-r {
      right: 0;
      top: 0;
      bottom: 0;
      width: 5px;
    }
  </style>
</head>
<body>
  <!-- just a large div to get scrollbars -->
  <div style="width: 9999px; height: 9999px; background: #ddd"></div>
  <div id="border-t"></div><div id="border-b"></div>
  <div id="border-l"></div><div id="border-r"></div>
</body>
</html>
13
Marcel Korpel

Вам понравится этот.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<style>
html {
    height: 100%;
    width: 100%;
    display: table;
}
body {
    display: table-row;
}
#wrapper {
    display: table-cell;
    border: 5px solid red;
}
</style>
</head>

<body>
    <div id="wrapper"></div>
</body>
</html>

http://www.test.dev.arc.net.au/100-percent-border.html

Я подумал, поскольку таблицы сохраняют много «странного» поведения даже в стандартном режиме, и они могут быть решением. Превратить элемент HTML в таблицу довольно забавно.

Прежде чем отмечать, что в IE6 не работает, учтите, что это очень тривиальная проблема, которую нужно исправить. Дело в том, что использование алгоритма рисования таблицы является решением, и чистое решение CSS также возможно:

<table class="outer"><tr><td class="inner"> ...page content...
8
SpliFF

Пока CSS3 не даст нам внутренние границы и переключение блочной модели, вам понадобится два элемента div. Первый дает 100% высоты, а второй - границы. В противном случае граница выходит за пределы 100% высоты (т.е. 1px + 100% + 1px)

КСТАТИ. Вы должны собрать некоторые статистические данные, прежде чем перейти "только IE". IE не имеет доли рынка, которой он когда-то обладал. Где-то между 10 - 30% ваших пользователей могут быть в других браузерах.

3
SpliFF

Это также немного некрасиво, но дает тело

position:relative;
top:-1px;
left:-1px;

работал на меня.

1
acme

Вот простое решение, использующее только элементы html и body (нет необходимости во вложенных элементах div). Он использует специальное поведение HTML-элемента (у него не может быть внешней границы, поэтому он должен уменьшаться для отображения).

<html>
<head>
<style>
html {padding:0; margin:0; border:5px solid red;}
body {height:100%; padding:0; margin:0; border:0;}
</style>
</head>

<body>

</body>
</html>
1
SpliFF

Попробуйте установить границы для элемента HTML. Элемент body занимает столько места, сколько ему нужно, но, насколько я помню, html-элемент занимает все пространство (именно здесь вы также должны установить фон).

Я не уверен, как выглядят границы, я обычно только устанавливаю фон.

0
Xr.

граница выходит за рамки 100%. Попробуйте padding: -1px или margin: -1px.

0
Sergei Kovalenko