修改div的外观区域

Question

我想创建一个全站点布局，我可以在其中创建细分到预先分配的位置，而无需定位设置。

我创建了一个顶部、左侧和底部的包装器，它应该始终是固定的。 示例如下：

http://jsfiddle.net/4ca1uto5/

我想要的是制作任何 div，跟随顶部/左侧包装器出现在顶部和左侧包装器下方。

 <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

从你的所有类中删除 position:fixed; 样式

Answer 3

删除：

#leftwrapper {
    height:100%;
}