<分区>
html - Css force div 填充它和页脚之间的空间
我在 div 中有一个联系表单，它在较小的屏幕分辨率下完美地填充了它与页脚之间的距离，但是当屏幕较大时我遇到了一个问题:联系表单 div 和页脚之间有空白:
这是我的 CSS(帮助我将页脚保持在底部的重要部分):
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
font: 400 16px/1.4 'Roboto', sans-serif;
display: flex;
flex-direction: column;
}
.contact {
width: 100%;
clear: both;
overflow: hidden;
background: #fff;
padding: 50px 0;
margin-top: 50px;
}
.footer {
background: #313a44;
border-top: 1px solid #e2e8f0;
width: 100%;
flex-shrink: 0;
padding: 50px 0 25px 0;
}<div class="header">
</div>
<div class="slider">
</div>
<div class="contact">
</div>
<div class="footer">
</div>P.S 页脚将具有动态高度
最佳答案
也许 CSS 网格是您的一个选择？
body {
padding: 0;
margin: 0;
display: grid;
grid-template-rows: minmax(100px, min-content) minmax(200px, min-content) auto minmax(60px, min-content) ;
grid-template-columns: 1fr;
min-height: 100vh;
grid-template-areas:
"header"
"slider"
"content"
"footer";
}
.header {
background-color: #e0e0e0;
grid-area: header;
}
.slider {
background-color: #e8e8e8;
grid-area: slider;
}
.contact {
background-color: orange;
grid-area: content;
}
.footer {
background-color: #333;
color: white;
grid-area: footer;
}
body > *::before { content: attr(class); }<div class="header">
</div>
<div class="slider">
</div>
<div class="contact">
</div>
<div class="footer">
</div>关于html - Css force div 填充它和页脚之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57222789/