大佬教程收集整理的这篇文章主要介绍了如何使 <div> 完全拉伸底部？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我希望它正好到达屏幕底部，但是我有一个标题，所以如果我设置高度：100%;，它太大了，并且页面是可滚动的。显然与 100vh 相同。而且我不想手动计算它，因为响应性。我的 CSS 可能看起来很糟糕，因为我确实尝试了所有我能想到的方法。
@H_419_4@
*{
Box-sizing: border-Box;
}
HTML,body{
min-height: 100% !@R_403_4151@;
height: 100%;
margin: 0;
padding: 0;
}
body{
Font-family: Verdana,Geneva,Tahoma,sans-serif;
color: #2e3e56;
BACkground-color: whitesmoke;
wIDth: 65%;
margin: auto;
}
/*header*/
#header{
text-align: center;
BACkground-color: #2e3e56;
color: #d0cbc5;
Font-size: 1.1rem;
padding: 0.3% 0% 0.3% 0%;
margin: 0;
top: 0;
}
#header table{
wIDth: 100%;
}
#hnametd p{
margin: 0;
padding: 0;
color: white;
Font-weight: bold;
}
#hnametd h1{
Font-family: 'Times New Roman',Times,serif;
margin: 0;
padding: 0;
}
#hlogotd{
wIDth: 18%;
padding: 0;
}
#hlogo{
wIDth: 100%;
float: left;
overflow: hIDden;
}
/*-------*/
/*hr-area*/
hr{
height: 10px;
border: none;
margin: 0;
padding: 0;
}
.dblue{
BACkground-color: #156390;
}
.lblue{
BACkground-color: #7296ab;
}
.gray{
BACkground-color: #d0cbc5;
}
.hrbottom{
height: 15px;
wIDth: 100%;
}
/*-------*/
#wrapper{
height: fit-content;
wIDth: 100%;
BACkground-color: #2e3e56;
padding-right: 3.5%;
overflow: hIDden;
}
/*sibebar*/
#sIDebar{
float: left;
color: white;
Font-size: 0.955rem;
padding: 2.2% 0 2.2% 2.2%;
max-wIDth: 21%;
}
#sIDebar ul{
List-style-type: none;
margin: 0 auto;
padding: 0;
}
.con-li{
margin: 1em 0 1em 0;
}
#sIDebar h2{
Font-family: 'Times New Roman',serif;
margin: 0;
padding: 0;
color: #d0cbc5;
}
#sIDebar a{
text-decoration: none;
color: white;
}
#sIDebar a:hover{
color: #7296ab;
}
/*----*/
/*main*/
#main{
z-index: 1;
BACkground-color: white;
Font-size: 1rem;
min-height: 100vh;
height: fit-content;
wIDth: 77.5%;
float: right;
overflow: hIDden;
padding: 0.625rem;
}
#main h1{
Font-family: 'Times New Roman',serif;
}
#main p{
wIDth: 100%;
text-align: justify;
}<div ID="header">
<table>
<tr>
<td ID="hlogotd"><img src="logo.svg" alt="logo" ID="hlogo"></td>
<td ID="hnametd">
<h1>header heading</h1>
<p>header placeholder text.</p>
</td>
</tr>
</table>
</div>
<hr class="dblue">
<hr class="lblue">
<hr class="gray">
<div ID="wrapper">
<div ID="sIDebar">
<h2>SIDebar heading</h2>
<p>Some placeholder text.</p>
</div>
<div ID="main">
<h1>Welcome!</h1>
<hr class="dblue">
<p>Some placeholder text.</p>
</div>
</div>
<hr class="gray hrbottom">
<hr class="lblue hrbottom">
<hr class="dblue hrbottom">
以上是大佬教程为你收集整理的如何使 <div> 完全拉伸底部？全部内容，希望文章能够帮你解决如何使 <div> 完全拉伸底部？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。