Question

我正在制作一个简单的布局，但有一点让我烦恼。我想要一个包含两列，全高，侧边栏和内容的布局。在侧边栏中，我想要两件事：

一个按钮位于底部，固定高度。
一个div将以剩余空间为中心，流体高度。

我尝试兼容IE 9。

这是基本布局：

<aside>
  <div class="wrapper">
    <nav>
      <ul>
        <li>Item menu</li>
        <li>Item menu</li>
        <li>Item menu n</li>          
      </ul>
    </nav>
  </div>
  <a class="btn">
    button must be at the bottom
  </a>
</aside>
<main>
  My content
</main>

基本的css：

* { margin:0; padding: 0; box-sizing:border-box; }
html, body { height: 100%; }
aside, main { height: 100%; }
aside {
  position:fixed;
  left:0;
  top:0;
  width: 200px;
  background:#eee;
}
main {
  width: calc(100% - 200px);
  margin-left:200px;
}

现在，我尝试的任何东西都会导致窗户高度较小时出现问题。（菜单上的按钮，或者菜单没有滚动条等等）

我尝试过的事情：

aside{display:table}，.wrapper{display:tablle-cell; vertical-align:middle} .btn{position: fixed; bottom:0; left:0;}
nav{top:50%; transform:translateY(-50%);}但是，有一点，导航的内容会在视口顶部... ...
和一些flexbox，但我无法达到想要的结果。

如果您需要更多信息，我将非常欢迎您给予他们。谢谢。

Answer 1

这应该可以帮助您入门。

<强>已更新

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

aside,
main {
  /*   height: 100%; */
  /*   width: 100%; */
}

aside {
  flex-grow: 1;
  background: #eee;
  padding: 5px;
}

main {
  flex-grow: 6;
  background: #ddd;
  padding: 20px;
  height: 100vh;
  overflow-y: scroll;
}

.wrapper {
  display: flex;
  height: 100vh;
  justify-content: space-between;
  flex-direction: column;
}

.btn {
  margin: 20px auto;
  background: #bada55;
  padding: 20px;
}

<aside>
  <div class="wrapper">
    <nav>
      <ul>
        <li>Item menu</li>
        <li>Item menu</li>
        <li>Item menu n</li>
      </ul>
    </nav>
    <a class="btn">
button
  </a>
  </div>

</aside>
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Doloremque ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque
    ex, obcaecati eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati
    eveniet distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet
    distinctio provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex, obcaecati eveniet distinctio
    provident tempora, voluptatum, quisquam dicta autem blanditiis quae consectetur cupiditate aliquam architecto quia, labore dolores qui unde.</p>
</main>

修复了带有一个溢出内容和一个固定内容的侧边栏

1 个答案: