Не удается предотвратить переполнение вложенных Div при использовании процентных размеров и заполнения в CSS? - PullRequest
Новая
       27

Не удается предотвратить переполнение вложенных Div при использовании процентных размеров и заполнения в CSS?

0 голосов
/ 24 апреля 2010

Я хочу иметь возможность размещать вложенные div с этими свойствами:

  • width: 100%
  • height: 100%
  • padding: 10px

Я хочу, чтобы это было так, чтобы дочерние элементы имели 100% ширину и высоту оставшихся пробелов после вычисления отступов, а не до. В противном случае, когда у меня есть документ, подобный приведенному ниже, дочерний элемент заставляет появиться полосы прокрутки. Но полосы прокрутки - не главная проблема, факт, что дочерний элемент простирается за пределы родительского контейнера, является.

Я могу использовать все position: absolute декларации, но это не так. Вот код: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <title>Liquid Layout</title>
    <style>
      body, html {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        background-color:black;
      }
      #container {
        position:relative;
        width:100%;
        height:100%;
        background-color:red;
        opacity:0.7;
      }
      #child1 {
        position:relative;
        width:100%;
        height:100%;
        padding:10px;
        background-color:blue;
      }
      #nested1 {
        position:relative;
        background-color: white;
        width:100%;
        height:100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="child1">
        <div id="nested1"></div>
      </div>
    </div>
  </body>
</html>

Как мне сделать так, используя position:relative или position:static и процентные размеры, проценты определяют размер дочерних элементов в соответствии с шириной / высотой родителя минус отступы и поля? Нужно ли прибегать к position:absolute и влево / вправо / сверху / снизу?

Спасибо за помощь, Lance

1 Ответ

1 голос
/ 24 апреля 2010

Я хочу, чтобы дочерние элементы имели ширину 100% и высоту оставшегося пространства после заполнения, а не до.

Блестящий футуристический способ сделать это: 

#something {
    width: 100%; height: 100%; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}

Однако это не будет работать в IE до версии 8.

Должен ли я прибегнуть к положению: абсолютное и левое / правое / верхнее / нижнее?

Это другой способ, но «позиционирование по краям» (позиционирование top и bottom, но не height, и аналогично для left / right / width) не будет работать в IE до версии 7.

полосы прокрутки не являются основной проблемой, тот факт, что дочерний элемент выходит за пределы ширины родительского контейнера.

По горизонтали это не проблема. Оставьте width по умолчанию auto, и он получит полную ширину своего родителя минус отступы. Единственная проблема в том, что вы не получаете такое поведение с height.

Гибридный подход: auto - width, 100% высота с box-sizing, и добавить несколько JS-хаков, которые работают только в IE6-7, чтобы исправить там высоту?

...