具有固定和可变元素的Flex css布局

2023年7月12日 221次阅读

我希望在纯CSS中创建以下布局.我知道我可以通过
JavaScript解决方案实现这一目标,但如果可能的话,CSS解决方案会更加清晰.

我创建了一个jsFiddle,我知道这是不正确的,提供一个起点.我在jsFiddle中使用的HTML和CSS如下所示.

笔记：

>我希望这填充窗口的整个高度,以便页面没有滚动条(但请参阅我的最后一点)
>有两个部分可以包含可变数量的元素.
>红色元素是用户可以动态添加的图像,并且将给出具有固定宽高比的帧(此处显示为正方形)
>绿色部分将包含一个至少包含一个项目的列表,因此它将具有固定的最小高度.它最多可能有四个项目,因此其高度可能会发生变化.我宁愿不让这部分滚动.如果用户使窗口太短而绿色和蓝色元素都显示全高,则整个页面必须滚动.

我的问题是：这可以在纯CSS中完成吗？如果您知道有一个解决方案,并且您可以提供一些关于如何实现它的指示,那么我可以继续努力解决该问题.如果您知道没有解决方案,那么我将简单地采用JavaScript方法.

如果有解决方案,并且您乐意分享它,那么我会很高兴您为我节省了很多时间.

<!DOCTYPE html>
<html>
<head>
    <title>Flex</title>
    <style>
body, html {
height: 100%;
margin: 0;
background: #000;
}
main {
width: 30em;
height: 100%;
margin: 0 auto;
background: #333;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.head{
width:100%;
-webkit-flex: 3em;
        flex: 3em;
background: #fcc;
}
.expand{
width:100%;
overflow:auto;
}
.filler {
width:100%;
height:20em;
background: #003;
border-bottom: 1px solid #fff;
}
.space {
width:100%;
height:10em;
border-bottom: 1px solid #fff;
}
.foot{
width:100%;
-webkit-flex: 0 0 2em;
        flex: 0 0 2em;
background: #cfc;
}

    </style>
</head>
<body>
<main>
  <div class="head">HEAD</div>
  <div class="expand">
    <div class="space"></div>
    <div class="filler"></div>
    <div class="space"></div>
  </div>
  <div class="foot">FOOT</div>
</main>
</body>
</html>

最佳答案 如果我理解得很好,

main {
    height: auto;
    min-height: 100%;
}
.head {
    min-height: 3em;
}
.foot {
    min-height: 2em;
}
.expand {
    flex-basis: 0; /* Initial height */
    flex-grow: 1; /* Grow as much as possible */
    overflow: auto;
}

body,
html {
  height: 100%;
  margin: 0;
  background: #000;
}
main {
  width: 20em;
  min-height: 100%;
  margin: 0 auto;
  background: #333;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.head {
  width: 100%;
  min-height: 3em;
  background: #fcc;
}
.expand {
  width: 100%;
  flex-basis: 0;
  flex-grow: 1;
  overflow: auto;
}
.filler {
  width: 100%;
  height: 20em;
  background: #003;
  border-bottom: 1px solid #fff;
}
.space {
  width: 100%;
  height: 2em;
  border-bottom: 1px solid #fff;
}
.foot {
  width: 100%;
  min-height: 2em;
  background: #cfc;
}
<main>
  <div class="head">HEAD</div>
  <div class="expand">
    <div class="space"></div>
    <div class="filler"></div>
    <div class="space"></div>
  </div>
  <div class="foot">FOOT</div>
</main>
点赞