修改div div的出現區域

Question

我想創建一個全站點佈局，我可以在其中創建subdivs到預先指定的位置，而無需定位設置。

我已經創建了一個頂部，左邊和底部的包裝，它應該始終是固定的。 示例如下：

http://jsfiddle.net/4ca1uto5/

我要的是做任何的div，繼前/左包裝出現低於收入和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

雖然我不是你的佈局方法的粉絲這就是你想要什麼是可能的。

首先，您沒有爲您的固定div指定位置值，以便需要解決。

的，通過添加填充頂部&左側（頂部=等於您的標題的高度）和（左=側邊欄的寬度）與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

從所有的類

Answer 3

消除消除position:fixed;風格：

#leftwrapper { 
    height:100%; 
}