Question

我想将视口分为三行：

1。）标头

2。）内容

3。）页脚

页眉和页脚具有固定的高度，而内容应根据其内部文本具有灵活的高度。规则应为：

1。）如果页眉+内容+页脚的高度比视口小，则应增加内容的高度，以使页眉+内容+页脚的高度与视口。

2。）如果页眉+内容+页脚的高度比视口更大，则应显示垂直滚动条。

我认为这很容易，但是在HTML，body和wrapper上使用height：100％不适用于规则2。）在html，body和wrapper上使用min-height：100％不适用于规则1 ）

有什么主意要怎么做吗？

html,
body,
wrapper {
  min-height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.header,
.footer {
  height: 20px;
  background-color: #a0a0a0;
}

.content {
  flex-grow: 1;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="footer">Footer</div>

Answer 1

您的CSS中有一个错误。

html,
body,
wrapper {
  margin: 0;
  min-height: 100%;
}

问题在于wrapper应该是.wrapper。此外，请勿打扰在100%，html，body等上设置.wrapper的高度。您只需要担心.wrapper。只需在其上设置min-height: 100vh，就可以完成。我将浏览器提供的默认边距清零，但这是可选的，与您的问题无关。

html,
body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;      /* <-- All that's needed */
}

.header,
.footer {
  height: 20px;
  background-color: #a0a0a0;
}

.content {
  flex-grow: 1;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="footer">Footer</div>
</div>

Answer 2

这是您要找的吗？

html,
body {
  height: 100%;     // fixed height
  margin: 0;        //removed default spacing
  padding: 0;       //removed default spacing
  border: 0;        //removed default spacing
  overflow: hidden; // removed scroll from html and body
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;     // fixed height
}

.header,
.footer {
  height: 20px;
  background-color: #a0a0a0;
}

.content {
  flex: 1 1;
  overflow: auto;   // enabled scroll bar
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header,
.footer {
  height: 20px;
  background-color: #a0a0a0;
}

.content {
  flex: 1 1;
  overflow: auto;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
    et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="footer">Footer</div>

Answer 3

Try this fiddle

html, body, .wrapper {
height:100%;
padding:0;
margin:0
}
.wrapper {
display:flex;
flex-direction: column;
}

.header, .footer {
 height:20px;
 background-color:#a0a0a0;
 }

.content {
flex-grow: 1;
}

Answer 4

将页眉和页脚的flex设置为none。对于内容，将flex设置为auto。下面是完整的修改后的代码。

CSS

html, body, .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;    
    margin: 0;
}
.wrapper  {
    display:flex;
    flex-flow: column nowrap;   
}

.header, .footer {
    flex:none;
    background-color:#a0a0a0;
    color:white;

}
.content {
    flex:auto;  
    overflow-y:scroll;
}

HTML

<body>
    <div class="wrapper">
      <div class="header">Header</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
      <div class="footer">footer</div>

    </div>
</body>

高度：填满整个视口，但必要时滚动

4 个答案: