Question

我一直在做布局。我决定在jsFiddle中举一个例子。

我遇到的问题是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%;
}

Answer 1

因为你的部分也有100％的高度，并且也在包装内，所以它会像侧边栏一样占据包装的整个高度。

例如：当body / html和包装器的高度为200px时，如果你在高度为150px的包装器中添加一个高度为100px的元素包装器中的任何内容将具有200px的高度，你需要将其添加到之前的200。 / p>

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

解决这个问题的方法是将标题和部分放在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, 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%;
    }

HTML5布局问题

1 个答案: