Граница Div с размерами 100% не отображается - PullRequest
Новая
       23

Граница Div с размерами 100% не отображается

1 голос
/ 30 августа 2009

Рассмотрим эту простую разметку: 

<body>
 <div style="border: 2px solid navy; position:absolute; width:100%; height:100%">
 </div>
</body>

В протестированных мною браузерах (Firefox и Chrome) правая и нижняя части рамки, по-видимому, находятся за пределами области окна, поскольку они не видны. Как мне исправить мою разметку или таблицу стилей так, чтобы граница div была полностью видна, в то время как div занимает всю доступную область (т. Е. Его размеры составляют 100% / 100% или эквивалент)?

1 Ответ

3 голосов
/ 30 августа 2009

Поскольку граница лежит за пределами ширины элемента, если ширина вашего тела равна 100%, граница будет за пределами этого и, следовательно, не будет видна. Посмотрите на модель коробки:

альтернативный текст http://www.codeweblog.com/upload/b/basic-knowledge-of-css.png

Чтобы установить рамку для вашей страницы, просто не определяйте ширину и высоту: 

body
{
  border: 2px solid navy;
}

Альтернативой может быть создание искусственной границы, установка цвета фона HTML в качестве цвета рамки, добавление отступов, а затем установка обычного цвета фона страницы: 

html
{
  background-color: navy;
  padding: 2px;
}
body
{
  background-color: #fff;
}

Или, если вы хотите сделать это, используя div: 

<body>
  <div class="containerDiv">
    <div class="theDiv">
      Content here.
    </div>
  </div>
</body>

...

div.containerDiv
{
  background-color: navy;
  padding: 2px;
}
div.theDiv
{
  width: 100%;
  height: 100%;
  background-color: #fff;
}
...