Подтвердить что ты не робот

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

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

Я хочу иметь границу вокруг моего документа. Он должен хорошо перемещаться по всему окну/окну просмотра. Поэтому я определяю:

body {
  border: 1px solid red;
}

Когда мой документ находится в режиме quirks, это работает отлично. По крайней мере, в IE, которая является моей основной целью здесь. Красная рамка отображается на самых краях моей страницы, очевидно, потому что предопределенные CSS body и 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-только отлично, кросс-браузер будет лучше, конечно.

4b9b3361

ОТВЕТЫ

Ответ 1

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

Другое решение работает и в IE 7. Просто установите html и body на 100% высоту и overflow на hidden, чтобы избавиться от оконных полос прокрутки. Затем вам нужно вставить абсолютно позиционированную оболочку div, которая получает красную рамку и весь контент, установив все четыре свойства смещения окна выражений 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, hmmm...

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

<!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>

Ответ 2

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

<!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...

Ответ 3

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

BTW. Вы должны собрать некоторые статистические данные, прежде чем идти "только IE". У IE нет рынка, который он когда-то делал. В другом месте от 10 до 30% ваших пользователей могут находиться в других браузерах.

Ответ 4

Здесь простое решение, использующее только элементы 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>

Ответ 5

Он также немного уродлив, но дает тело

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

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

Ответ 6

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

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

Ответ 7

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