Почему родительский блок не растягивается шире viewport'а ?

salikoff · September 24, 2012

Здравствуйте.

Столкнулся с такой проблемой : вложенный блок не хочет растягивать свой родительский блок.

Вроде это противоречит теории, с которой я знаком.

Например:


<html>
 <body>
  <div style="height:100px;
               width:2000px;
          background:red">
 </div>
 </body>
</html>

Видно (в отладчике), что body растягивается только до ширины вьюпорта, а дальше не хочет.

Почему это так? Разве так должно быть?

Данный пример, естесственно, никакого отношению к реальной задаче не имеет,

это просто очень сильное упрощение.

Хотелось бы просто понять принцип (теорию)

mrnobody · September 24, 2012

Вообще то все наоборот — ширина блочного элемента зависит от ширины контейнера (родителя) в котором он находится. А если мы укажем ширину дочернему элементу больше чем ширина родителя, то ширина потомка "пойдёт" дальше.

Вот высота родителя зависит от высоты дочернего элемента.

salikoff · September 24, 2012

Вообще то все наоборот — ширина блочного элемента зависит от ширины контейнера (родителя) в котором он находится. А если мы укажем ширину дочернему элементу больше чем ширина родителя, то ширина потомка "пойдёт" дальше.
Вот высота родителя зависит от высоты дочернего элемента.

Автоматически возникает вопрос - как сделать так, чтобы родительский блок всегда "охватывал" дочерний по ширине?

Так же, как он это делает по высоте.

wwt · September 25, 2012

Вообще то все наоборот — ширина блочного элемента зависит от ширины контейнера (родителя) в котором он находится. А если мы укажем ширину дочернему элементу больше чем ширина родителя, то ширина потомка "пойдёт" дальше.
Вот высота родителя зависит от высоты дочернего элемента.
Автоматически возникает вопрос - как сделать так, чтобы родительский блок всегда "охватывал" дочерний по ширине?
Так же, как он это делает по высоте.

display:inline-block; мобыть http://jsfiddle.net/jTNY5/

Edited September 25, 2012 by wwt

salikoff · September 27, 2012

display:inline-block; мобыть http://jsfiddle.net/jTNY5/

Спасибо за помощь — способ работает. До сих пор не было чёткого представления, для чего inline-block нужен.

Кстати, body всё равно шире вьюпорта не растягивается, то есть приходится пользоваться враппером.

Edited September 27, 2012 by salikoff

Sign In

Почему родительский блок не растягивается шире viewport'а ?

Question

salikoff

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

salikoff

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

salikoff

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information