与this question类似,我正在努力使用CSS网格创建一个包含中间行的固定页眉和页脚的布局,应使用.static
或.dynamic
动态容器的剩余空间。所以在这种情况下,他们两个都应该有一个200px的完整height
。减去40px(标题+页脚的2x 20px),内容的剩余空间应为160px。正如您在示例中所看到的,左侧的红色参考div明显小于div容器的整个“三明治”。 .dynamic
div元素很大,会拉伸整个div容器。我想禁止这个!
以下是我必须满足的一些额外条件:
.wrapper
div以后不会有静态高度,但会填充给定高度的100%。因此,将使用onlydynamic
,因为这也使用100%的高度。与.static
的展示就是为了表明它甚至不能在固定的高度工作。.header
和.footer
之间的动态区域限制在一个高度。.content
的容器将自身扩展到100%宽度,并且应该作为一种黑盒子进行处理:每个组件都应该能够插入到这里。内容将始终使用100%的高度,不应拉伸环境父div。如果内容的高度比.dynamic
容器的动态分配空间更高,则内容将自己包含滚动条我怎么能用给定的描述来解决这个问题?
请参阅提供的示例,随时根据需要进行调整!
.wrapper {
display: flex;
flex-direction: row;
height: 200px;
max-height: 200px;
width: 100%;
}
.measurement {
height: 200px;
max-height: 200px;
min-height: 200px;
min-width: 3px;
background-color: red;
border: 2px solid blue;
padding: 2px;
margin: 1px;
}
.static,
.dynamic {
display: grid;
grid-template-rows: 20px 1fr 20px;
width: 50%;
border: 2px solid blue;
padding: 2px;
margin: 1px;
}
.static {
height: 200px;
max-height: 200px;
/*should NOT have an overflow/scrollbar but fit to the remaining space*/
}
.dynamic {
height: 100%;
max-height: 100%;
/*should NOT have an overflow/scrollbar but fit to the remaining space*/
}
.content {
height: 100%;
width: 100%;
overflow: auto;
/* Blackbox like content, always expands to 100% width and height */
/* could contain content that is larger than the dynamic-height div and will get scrollbar then */
}
.fixed-height {
background-color: green;
}
<div class="wrapper">
<div class="measurement"></div>
<div class="static">
<div class="fixed-height">TOP</div>
<div class="dynamic-height">
<div class="content">
TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST
</div>
</div>
<div class="fixed-height">BOTTOM</div>
</div>
<div class="dynamic">
<div class="fixed-height">TOP</div>
<div class="dynamic-height">
<div class="content">
TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST
</div>
</div>
<div class="fixed-height">BOTTOM</div>
</div>
</div>
编辑 如下图所示,TEST和BOTTOM文本超出了蓝色边框。我不是关于边框和红色参考之间的几个像素差异,但我担心底部边框溢出。
这是预期的行为:内容区域内应该有一个滚动条,没有溢出,动态div内没有滚动条
你需要将div.content
与div.dynamic-height
合并,并将max-height: 100%
属性设置为你的.dynamic-height
类。
.content
不需要高度,它由网格行的定义设置。
.wrapper {
display: flex;
flex-direction: row;
height: 200px;
max-height: 200px;
width: 100%;
}
.measurement {
height: 200px;
max-height: 200px;
min-height: 200px;
min-width: 3px;
background-color: red;
border: 2px solid blue;
padding: 2px;
margin: 1px;
}
.static,
.dynamic {
display: grid;
grid-template-rows: 20px 1fr 20px;
width: 50%;
border: 2px solid blue;
padding: 2px;
margin: 1px;
}
.static {
height: 200px;
max-height: 200px;
/*should NOT have an overflow/scrollbar but fit to the remaining space*/
}
.dynamic {
height: 100%;
max-height: 100%;
/*should NOT have an overflow/scrollbar but fit to the remaining space*/
}
.content {
width: 100%;
overflow: auto;
/* Blackbox like content, always expands to 100% width and height */
/* could contain content that is larger than the dynamic-height div and will get scrollbar then */
}
.fixed-height {
background-color: green;
}
.dynamic-height {
max-height: 100%;
}
<div class="wrapper">
<div class="measurement"></div>
<div class="static">
<div class="fixed-height">TOP</div>
<div class="dynamic-height content">
TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST
</div>
<div class="fixed-height">BOTTOM</div>
</div>
<div class="dynamic">
<div class="fixed-height">TOP</div>
<div class="content dynamic-height">
TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST
</div>
<div class="fixed-height">BOTTOM</div>
</div>
</div>