修改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%; 
}