根据元素大小填充（拉伸）或滚动

问题描述 投票：0回答：1

当 

display: flex
无法填满页面时，是否有可能获得 
min-content
的拉伸行为，但如果 
min-content
大于页面大小，仍然具有良好的滚动行为？

本质上，如果第二个代码片段的行为没有填满页面，我想要第一个代码片段的行为。

* {
  margin: 0.5rem;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-items: stretch;
  align-items: stretch;
  background-color: grey;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-items: stretch;
  align-items: stretch;
  background-color: blue;
}

.content>div {
  height: 100%;
  min-height: 1rem;
  background-color: gold;
}

.footer {
  height: 2rem;
  min-height: 2rem;
  flex: 0 0 1;
  background-color: green;
}
<body>
  <div class="content">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="footer center"></div>
</body>

* {
    margin: 0.5rem;
}

html, body {
    width: 100%;
    height: min-content;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-items: stretch;
    align-items: stretch;
    background-color: grey;
}

.content {
    height: min-content;
    display: flex;
    flex-direction: column;
    justify-items: stretch;
    align-items: stretch;
    background-color: blue;
}

.content > div {
    height: 6rem;
    min-height: 1rem;
    background-color: gold;
}

.footer {
    height: 2rem;
    min-height: 2rem;
    flex: 0 0 1;
    background-color: green;
}
<body>
  <div class="content">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="footer"></div>
</body>

css flexbox
1个回答
0
投票

为了达到您想要的结果，我们需要为父级/祖级div添加一些固定高度，在下面的代码中我将

100vh
的固定高度添加到
container
。

之后，您在 

%
中为所有子/孙子添加高度，以便其调整为当前窗口的高度。在下面的代码中，我将 
height: 85%;
添加到 
content
， 
height: 27%;
到 
footer
和 
height: 27%;
到 
div
。

我没有添加flex用法的解释，如果你想了解更多可以留言。谢谢你。

body{
  margin: 0;
  padding: 0;
  background-color: gray;
}

.container{
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content{
  background-color: blue;
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}

.content div{
  height: 27%;
  background-color: gold;
  
}

.footer{
  background-color: green;
  height: 10%;
}
<body>
  <div class="container">
    <div class="content">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="footer center"></div>
  </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.