我希望用纯 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>关于css - 具有固定和可变元素的 Flex css 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30286589/