Изменение области появления div

Question

Я хочу создать полноэкранный макет, в котором я могу создать subdivs в предварительно назначенное положение, БЕЗ настроек позиционирования.

Я создал верхнюю, левую и нижнюю обертку, которые всегда должны быть исправлены. Пример следующим образом:

http://jsfiddle.net/4ca1uto5/

Что я хочу сделать ЛЮБЫЕ дивы, следуя топ/влево оберток появляются ниже верхнего и leftwrapper.

<div id="topwrapper">hej</div> 
<div id="leftwrapper">hej2</div> 
<div><p>I want this div to start within the topleft corner of the white area, without any positioning settings</p></div> 
<div id="bottomwrapper">hej3</div> 

#topwrapper { 
position:fixed; 
width:100%; 
height: 100px; 
background-color:blue; 
color:white; 
} 
#leftwrapper { 
position:fixed; 
width: 20%; 
height:100%; 
background-color:grey; 
color:white; 
top:100px; 
} 
#bottomwrapper { 
position:fixed; 
width:100%; 
height:50px; 
background-color: orange; 
color:white; 
bottom:0px; 
} 

Answer 1

Хотя я не поклонник вашего метода компоновки это то, что вы хотите, это возможно.

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

, добавив верхнюю часть верхнего края & влево (верхняя = равная высоте вашего заголовка) и (слева = ширина боковой панели) до body, мы можем гарантировать, что все будущие div начинаются по мере необходимости.

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

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    padding-left: 20%; 
 
    padding-top: 100px; 
 
} 
 
#topwrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: blue; 
 
    color: white; 
 
} 
 
#leftwrapper { 
 
    position: fixed; 
 
    left: 0; 
 
    width: 20%; 
 
    height: calc(100% - 150px); 
 
    /* 150px = header + footer */ 
 
    background-color: grey; 
 
    color: white; 
 
    top: 100px; 
 
} 
 
#bottomwrapper { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: orange; 
 
    color: white; 
 
    bottom: 0px; 
 
    left: 0; 
 
}

<div id="topwrapper">hej</div> 
 
<div id="leftwrapper">hej2</div> 
 
<div> 
 
    <p>I want this div to start within the topleft corner of the white area</p> 
 
</div> 
 
<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit aperiam obcaecati dicta odit praesentium doloremque fuga soluta rem nisi aliquid. Ad earum non sit voluptatem!</p> 
 
</div> 
 
<div id="bottomwrapper">hej3</div>

Answer 2

Удалить position:fixed; стиль из всех классов

Answer 3

Снимите:

#leftwrapper { 
    height:100%; 
}