HTML5布局问题

我已经做了一段时间的布局了。我决定在JSFIDLE中创建一个示例

我遇到的问题是，ASIDE不会扩展到其父“包装器”的完整高度，而只扩展到视图端口的高度。除此之外，还需要能够向右或向左移动

我对创建此布局的其他方法持开放态度，没有表格

/* PHP option to control the width of all content by wrapper via style */
/* PHP option to control which side to float the sidebar to via style */
<div id="wrapper" style="width:100%;">
    <aside style="float: right;">This Sidebar</aside>
    <header>The Header</header>
    <section>The Main Content Area</section>
    <footer>The Footer</footer>
</div>

html, body {
  min-height: 100%;
  height: 100%;
}
#wrapper {
  margin: 0;
  padding: 0;
  background: brown;
  height: 100%;
}
aside {
  width: 200px;
  background: yellow;
  height: 100%;
}
header {
  height: 150px;
  background: blue;
  width: 100%;
}
section {
  background: red;
  width: 100%;
  height: 100%;
}
footer {
  height: 50px;
  background: green;
  width: 100%;
}

/*PHP选项，通过样式控制包装器中所有内容的宽度*/
/*PHP选项来控制侧边栏通过样式浮动到哪一侧*/
这个边栏
标题
主要内容领域
页脚
html，正文{
最小高度：100%；
身高：100%；
}
#包装纸{
保证金：0；
填充：0；
背景：棕色；
身高：100%；
}
旁白{
宽度：200px；
背景：黄色；
身高：100%；
}
标题{
高度：150像素；
背景：蓝色；
宽度：100%；
}
部分{
背景：红色；
宽度：100%；
身高：100%；
}
页脚{
高度：50px；
背景：绿色；
宽度：100%；
}

因为你有一个100%高度的部分，而且还放在包装内，所以它会像边栏一样占据包装的整个高度

例如： 当body/html和wrapper的高度为200px时，元素wrapper中任何高度为100%的元素都将具有200px的高度，如果在wrapper中添加高度为150px的标头，则需要将其从之前添加到200

这将导致边栏的高度永远不会到达包装器的底部，因为它缺少标题的高度

解决这一问题的一个方法是使收割台和截面的高度达到100%，就像收割台15%和截面85%一样

这意味着它们都可以缩放，但侧边栏的高度始终相同

<div id="wrapper">
    <aside style="float: right;">This Sidebar</aside>
    <header>The Header</header>
    <section>The Main Content Area</section>
</div>
<footer>The Footer</footer>

这个边栏
标题
主要内容领域
页脚

html，正文{ 最小高度：100%； 身高：100%； } #包装纸{ 保证金：0； 填充：0； 背景：棕色； 身高：100%； 宽度：100% } 旁白{ 宽度：200px； 背景：黄色； 身高：100%； } 标题{ 身高：15%； 背景：蓝色； 宽度：100%； } 部分{ 背景：红色； 宽度：100%； 身高：85%； } 页脚{ 高度：50px； 背景：绿色； 宽度：100%； }

---

你是什么意思，

旁白

没有扩展到

#包装

的全高

#wrapper

和

aside

都有一个

高度：100%

规则，因此它们都与

body

高度相同。感谢您为我解决此问题。 html, body { min-height: 100%; height: 100%; } #wrapper { margin: 0; padding: 0; background: brown; height: 100%; width:100% } aside { width: 200px; background: yellow; height: 100%; } header { height: 15%; background: blue; width: 100%; } section { background: red; width: 100%; height: 85%; } footer { height: 50px; background: green; width: 100%; }