2

我已经在布局上工作了一段时间。我决定在 jsFiddle 中创建一个示例。

http://jsfiddle.net/PSYgU/1/

我遇到的问题是 ASIDE 没有扩展到其父“包装器”的完整高度，仅扩展到视口的高度。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%;
}
4

1 回答 1

1

因为您的部分也在 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%；
    }
于 2013-01-14T17:18:00.330 回答