Question

我想为页面本身制作一个没有滚动条的全高框架。这就是为什么我将包装纸的高度设置为100vh的原因。就像我说的那样，我不需要整个页面的滚动条。

如果我在menu-div或content-div中添加更多内容，它们会扩展。我希望他们“保持”其高度，如果添加了更多内容，我希望他们获得滚动条。所以我想要一个框架，其中每个div（页眉，正文和页脚）都在浏览器视图中。如果要添加更多内容，我希望menu-div和/或content-div上出现溢出-。

现在，我用一些JavaScript代码修复了此问题，但我希望/认为有一个仅CSS的解决方案。

让我们说（这不是一个例子，情况并非如此），页眉的高度为10％，页脚的高度为15％。 100％（浏览器窗口高度）-10％-15％= 75％。我希望body-div正好是75％，并且我不希望它在添加更多内容时被拉长。

我希望大家都理解我的问题，因为英语不是我的母语，所以我很难写下来。

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

.header {
  flex: 0 0 auto;
  background: red;
}

.body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
}

.menu {
  flex: 0 0 20%;
  background: yellow;
}

.content {
  flex: 0 0 80%;
  background: blue;
}

.footer {
  flex: 0 0 auto;
  background: green;
}

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="body">
    <div class="menu">
      <ul>
        <li>Menu item #1</li>
        <li>Menu item #2</li>
        </li>
    </div>
    <div class="content">
      CONTENT GOES HERE
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>

（我添加了一些背景色以使其更加可见）。

这是一个JSFiddle：http://jsfiddle.net/f9gb0qLn/2/

flexbox项目的固定高度

0 个答案: