Сделать абсолютное позиционирование div, увеличить родительскую высоту div

Как вы можете видеть в CSS ниже, я хочу, чтобы child2 позиционировал себя перед child1. Это связано с тем, что сайт, который я сейчас разрабатываю, должен также работать на мобильных устройствах, на которых child2 должен быть внизу, поскольку он содержит навигацию, которую я хочу, под контентом на мобильных устройствах. - Почему бы не 2 шедевры? Это только 2 элемента div, которые переставлены во всем HTML, так что 2 мастер-страницы для этого незначительного изменения являются излишним.

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

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

Я знаю, что элементы с абсолютным позиционированием удаляются из потока, поэтому другие элементы игнорируются.
Я пробовал настройкуoverflow:hidden; на родительском div, но это не помогло, как и не исправление.

Моим последним средством будет javascript, чтобы соответствующим образом изменить положение двух элементов div, но сейчас я попытаюсь выяснить, существует ли не-javascript способ сделать это.

Ответы на вопрос(14)

Ваш ответ на вопрос