Question

我具有以下代码结构

.parent {
  display: flex;
  flex-direction: column;
}

.img {
  width: 100%
}

.content {
  flex: 1;
  overflow-y: scroll;
}
.container {
  border: 1px solid;
  display: flex;
  flex-direction:column;
  margin:20px;
}

<div class="parent">
  <img src="https://www.everythingcarers.org.au/media/1982/sample.jpg"/>
  <div class="content">
  </div>
  <div class="footer">
    <div class="container">
       <div><button>Button1</button><div>
       <div><button>Button2</button><div>
    </div>
  </div>
</div>

我想要的是页脚占据其原始宽度和高度（高度：144px），并根据屏幕分辨率根据可用空间使内容可滚动。当前，页脚在某些屏幕上已被切断。我已经尝试过更改内容和页脚的flex值，但这是行不通的。谢谢

Answer 1

如果要将父级限制为屏幕高度，以便始终显示页脚，则需要在div（以及body和html）上将高度设置为100％，并将图像移动到内容容器中（或者有单独的滚动条，如果滚动条太大，则会滚动）

body,
html {
  margin: 0;
  height: 100%;
}

.parent {
  height: 100%;
  display: flex;
  flex-direction: column;
}

img {
  display:block;
  width: 100%
}

.content {
  flex: 1;
  overflow-y: scroll;
}

.container {
  border: 1px solid;
  display: flex;
  flex-direction: column;
  margin: 20px;
}

<div class="parent">
  <div class="content">
    <img src="https://www.everythingcarers.org.au/media/1982/sample.jpg" />
  </div>
  <div class="footer">
    <div class="container">
      <div><button> Button1 </button></div>
      <div><button> Button2 </button></div>
    </div>
  </div>
</div>

Answer 2

我认为将您的父级高度设置为100vh，并将页脚设置为固定高度应该可以解决此问题：

https://codepen.io/chrishalley/pen/zbwRMw

    body {
  margin: 0;  
}

.parent {
  display:flex;
  flex-direction:column;
  background-color: orangered;
  height: 100vh;
}

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

img {
  width: 300px;
}

.footer {
  height: 144px;
}

Flex切断子项

2 个答案: