переполнение: скрытый на div и теле, различное поведение

учитывая этот html:

<body>
  <div id="a"></div>
  <div id="b"></div>
</body>

я хочу #b чтобы заполнить все оставшееся вертикальное пространство своего контейнерного блока, я начал с этого:

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

так #b высота 100%, что означает, что он принимает высоту своего родительского контейнерного блока, который 500px, проблема в том, что overflow: hidden; кажется, не работает, #b не отсекается.

С другой стороны, если я обернуть #a и #b С другим div с теми же свойствами, что и body выше у меня есть желаемый результат:

#wrap {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

С этим html конечно:

<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>
</body>

мой вопрос, почему div и body кажется, имеют разные поведения с теми же свойствами? и есть ли способ получить тот же эффект без обертки?

чтобы проиллюстрировать вопрос, я создал два jsFiddles:

jsFiddle с тегом тела в качестве обертки:http://jsfiddle.net/3AMtG/

jsFiddle с тегом div в качестве обертки:http://jsfiddle.net/2QWn3/

два jsFiddles с одинаковыми свойствами дают разные результаты. Почему так?

6
css html overflow

3 ответов

на overflow свойство имеет определенные специальные поведения, характерные для HTML html и body элементы, которые описаны в в CSS2.1 спецификаций. Эти особые случаи предназначены для изменения настроек переполнения на всей странице в обычных обстоятельствах, поэтому авторам просто нужно установить его наhtml или body, но не оба.

в этом случае, когда вы подаете заявление overflow: hidden to body, это фактически влияет на видовое окно вместо body (вы это можно увидеть, изменив размер панели предварительного просмотра, чтобы сделать ее короче - полосы прокрутки не будут отображаться на самой панели предварительного просмотра). Это вызывает #b для переполнения тела обычно, даже если вы даете ему фиксированную высоту, которая меньше суммы #a и #b. Другими словами, это как если бы вы никогда не установите его на тело в первую очередь.

если вы устанавливаете overflow к чему-то другому, чем visible on html, однако, это заставляет окно просмотра использовать значение, заданное html вместо body, тем самым оставляя декларацию о body без изменений и позволяя ему вести себя так же, как обертка:

html {
  overflow: auto;
}

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

предварительный просмотр jsFiddle

7

тело и div имеют совершенно разные из них. В моей повседневной работе мне нравится создавать свой код таким образом.

<div class='xxx-ctn'>
  <div class='xxx-inner'>
    <div class='data-wrapper'>
      [p|ul|ol|h1-h6|article|section].....
    </div>
  </div>
</div>

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

0

элемент Body считается основным родительским элементом, внутри которого находятся другие элементы, отображаемые в окне браузера, поэтому свойство width и height неприменимо к нему. В соответствии с лучшими практиками лучше создать контейнер div, такой как #wrapper, который вы сделали во втором примере.

0