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

Я хочу иметь возможность размещать вложенные элементы 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 и слева/справа/сверху/снизу?

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


html layout css liquid-layout
person Lance Pollard    schedule 24.04.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

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

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

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

person bobince    schedule 24.04.2010
comment
Ницца! ты молодец, спасибо за быструю помощь. у вас есть быстрый файл javascript, чтобы указать мне, чтобы решить его быстрее;)? - person Lance Pollard; 24.04.2010
comment
Потерять position: absolute. - person bobince; 24.04.2010