CSS-设置Div的大小以填充剩余空间 [英] CSS - Set size of Div to fill remaining space
问题描述
我是CSS和im tryig的新手，可以创建模板的准系统.
I'm new to CSS and im tryig to create the barebones structure of my template.
我有一个div标题，main-content&页脚.我的页脚和标头很好，但我需要在主要内容div中填充"标头&之间的剩余空间页脚.我尝试将padding-bottom属性的高度设置为与页脚相同的高度，但它并未缩小与页脚的间距，只是将div的高度设置为padding-bottom值.
I have a div for header, main-content & footer. My footer & header fine, but i need to the main content div to "fill" the remaining space between the header & the footer. I've tried setting the padding-bottom property as the same height as the footer, but its not closing the gap to the footer, its simply setting the height of the div to the padding-bottom value.
我的HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<LINK type="text/css" rel="stylesheet" href="main.css"/>
<TITLE>Template</TITLE>
</HEAD>
<BODY>
<div id="container">
<div class="header"></div>
<div class="main-content"></div>
<div class="footer"></div>
</div>
</BODY>
</HTML>
还有层叠样式表.
#container{
min-height:100%;
position:relative;
}
.header{
border:2px dashed blue;
height:150px;
border-radius:5px;
padding:10px;
}
.main-content{
border:2px dashed blue;
border-radius:5px;
padding:10px;
padding-bottom:100px;
}
.footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
border:2px dashed blue;
border-radius:5px;
}
html, body{
margin:0;
padding:1px;
height:100%;
}
推荐答案
此外，我在这里和那里进行了一些调整，例如，您将不再需要padding-bottom，而不是使用min-height: 100%;，您应该使用height: 100%;，并且不要使用大写字母-小写标签，请养成仅以小写形式编写标签的习惯.
Also, I've tweaked few things here and there, for example, you won't need padding-bottom anymore, also, instead of using min-height: 100%; you should be using height: 100%;, and don't use uppercase-lowercase tags, keep an habit of writing the tags in lower case only.
这篇关于CSS-设置Div的大小以填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
