CSS: возможно ли получить div с высотой 100%, за исключением верхнего и нижнего полей? - PullRequest
Новая
       1

CSS: возможно ли получить div с высотой 100%, за исключением верхнего и нижнего полей?

6 голосов
/ 23 марта 2010

Я могу получить 100% высоты, вот так: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>T5</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
    </link>

    <style type="text/css">
      * { padding: 0; margin: 0; }
      html, body { height: 100%; }
      body {
         font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
         font-size: 75%;
      }
      h1 { font-weight: bold; font-size: 1.4em; padding: 10px 10px 0;}
      p { padding: 0 10px 1em; }
      #container {
         min-height: 100%;
         background-color: #DDD;
         border-left: 2px solid #666;
         border-right: 2px solid #666;
         width: 280px;
         margin: 0 auto;
      }
      * html #container { height: 100%; }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>100% Height Div</h1>
      <p>Lorem ipsum ...</p>
    </div>
  </body>
</html>

Это выглядит так:

alt text

Когда я говорю «100% высоты» - я имею в виду, что она остается полной высоты независимо от того, сколько содержимого в div и как изменяется размер окна.

Но возможно ли получить div с высотой "почти 100%"? Если я хочу поля сверху и снизу, могу ли я это сделать?

Я хочу, чтобы это выглядело так:

alt text

Я могу сделать это с помощью Javascript + CSS. Могу ли я сделать это только с помощью CSS?

Ответ:
Да, это возможно с абсолютным позиционированием. 

  #container {
     width: 380px;
     background-color: #DDD;
     border: 2px solid #666;
     position: absolute;
     top: 20px;    /* margin from top */
     bottom: 20px; /* margin from bottom */
     left: 50%;    /* start left side in middle of window */
     margin-left: -190px; /* then, reverse indent */
     overflow: auto; /* scrollbar as necessary */
  }

Результат:

alt text

Спасибо keithjgrant за ответ . Посмотреть весь код на http://jsbin.com/otobi.

Ответы [ 5 ]

4 голосов
/ 23 марта 2010

Попробуйте абсолютное позиционирование: 

#container {
    position: absolute;
    top: 20px;
    bottom: 20px;
}

Это может быть странно в IE6 (что не так?), Но есть много хитростей, которые можно попробовать, если вы гуглите вокруг.Некоторые из них включают добавление правила clear: both или перенос вашего абсолютного позиционного элемента в другой элемент div.

* overflow: auto должен заставить полосу прокрутки работать так, как вы ее себе представляете.: В качестве альтернативы, вы можете добавить заполнение 20px к div обертки, а затем установить контейнер на height: 100% без полей, и он должен заполниться до отступа своей оболочки.

0 голосов
/ 23 марта 2010

Вы можете использовать второй div внутри с отступом, чтобы реализовать фактическое «внешнее» заполнение: 

<div style="height: 100%; width: 500px; margin: 0 auto; background: #CCC; border: solid #999; border-width: 0px 2px;">
 <div style="padding: 20px 0px;">
  Content here
 </div>
</div>

В качестве альтернативы, если вы больше ничего не отображаете, вы также можете использовать body для внешней конструкции.

edit: На самом деле вам придется использовать min-height для внешнего div, чтобы фон работал, когда ваша страница превышает 100% размера экрана. Это, например, отлично работает: 

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title>Test</title>
 <style type="text/css">
   html
   { height: 100%; padding: 0; margin: 0; background: #FFF; }
   body
   { min-height: 100%; margin: auto; width: 500px;
     background: #CCC; border: solid #999; border-width: 0 2px; }
   div#main
   { padding: 20px 15px; }
 </style>
</head>

<body>
<div id="main">
 <h1>100% Height Div</h1>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
  pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
  pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
  rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
 <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
  Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo
  ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
  dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
  varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
  augue.</p> 
</div>
</body>
</html>
0 голосов
/ 23 марта 2010

Два варианта:

1) Вы можете использовать что-то вроде 

#theDiv {
    top: 16px;
    bottom: 20px;
}

, но это будет работать только на совместимых со стандартами браузерах и IE> = 7, поскольку IE 6 не будет корректно отображать ваш div при использовании top и bottom.

2) Вы можете изменить коробочную модель , чтобы включить границы сверху и снизу в пределах данного height. Используйте что-то вроде 

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box; /* IE >= 8 */
}

чтобы вы могли подделать top и bottom, используя 

#theDiv {
    border-top: 16px;
    border-bottom: 20px;
}

и переведите IE 6 и 7 в режим причуд (поместив что-то, например, HTML-комментарий перед DOCTYPE), чтобы использовать border-box блочную модель.

Если вы хотите поддерживать IE 6, вам придется использовать # 2. Таким образом, в IE 6 вы можете использовать режим причуд только тогда, когда вы этого хотите (единственный другой вариант для поддержки этого в IE 6 - это использование CSS-выражений, но они сильно нагружают процессор, так как механизм сценариев J (ava) IE должен пересчитывать их ширина и высота при каждом изменении размера).

0 голосов
/ 23 марта 2010

Это не точно, как CSS, но вы можете просто добавить тег BR вне контейнера вверху и внизу и настроить минимальное поле 100% на 90-95%.

0 голосов
/ 23 марта 2010

Не уверен, что что-то пропустил, но почему бы не добавить margin-top: 20px; margin-bottom: 20px к #container, если вы хотите получить поля?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...