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

Как сделать так, чтобы div содержимого занимал всю высоту страницы без прокрутки?

2 голосов
/ 07 сентября 2011

Я пытаюсь создать страницу, которая занимает 100% высоты страницы, без отображения полосы прокрутки.Тем не менее, я хотел добавить заголовок над этим, и когда я это сделаю, полоса прокрутки появляется из-за дополнительной высоты.Я пытался компенсировать отрицательное нижнее поле, чтобы компенсировать дополнительную длину, но это, похоже, не меняет длину.Как я могу предотвратить появление полосы прокрутки с этим макетом?

Вот код, который у меня есть: 

<html>
<head>
  <style type="text/css">
  * { 
    margin: 0;
    padding: 0;
  }
  body {
    background-color: orange;
  }
  div#header {
    background-color: red;
    height: 50px;
  }
  div#content {
    background-color: yellow;
    height: 100%;
    margin-bottom: -50px;
  }
  </style>
</head>

<body>
  <div id="header">
    HEADER
  </div>
  <div id="content">
    Test Content
  </div>
</body>
</html>

Редактировать: я пробовал margin-top: -50px с отступом-top: 50px для содержимого div ранее.Однако он не работает так, как я ожидал, так как содержимое будет перекрывать заголовок, даже если я установлю z-индекс.

Ответы [ 2 ]

6 голосов
/ 07 сентября 2011

Вот еще один способ

http://jsfiddle.net/b27e8/

  * { 
    margin: 0;
    padding: 0;
  }
  body {
    background-color: orange;
  }
  div#header {
    background-color: red;
    height: 50px;
  }
  div#content {
    background-color: yellow;
    top:50px;
    bottom:0px;
    width:100%;
    position:absolute;
  }
0 голосов
/ 07 сентября 2011

Я исправил вашу проблему, используя: 

div#header {
background-color: red;
height: 10%;  }
div#content {
background-color: yellow;
height: 90%;
margin-bottom: -50px;   }

Возможно, вам придется поиграть с%, чтобы исправить это ...

Редактировать: Я использовалFirefox 6, чтобы проверить это, кстати.Вы также можете получить точные проценты, используя десятичные дроби (например, 95.6%

...