html - 我该怎么做拉伸到底是做什么的？

Question

我希望它正好到达屏幕的底部，但是我有一个标题，所以如果我设置 height: 100%;，它太大了，页面是可滚动的。显然与 100vh 相同。而且我不想手动计算它，因为响应能力强。我的 CSS 可能看起来很糟糕，因为我尝试了所有我能想到的东西。

*{
    box-sizing: border-box;
}

html, body{
    min-height: 100% !important;
    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', Times, 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', Times, 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">

标签： htmlcss

Answer 1

有几种方法可以做到这一点。一种方法是通过减去其他所有内容（相加时）来计算最小高度。在这种情况下，您的标题和这 6 个 <hr> 标签加起来为 247 像素。您还可以包括对不同浏览器的支持。您还可以使用 <header> 标签代替 div。

*{
    box-sizing: border-box;
}

html, body{
    min-height: 100% !important;
    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', Times, 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: calc(100vh - 247px);
    height: -o-calc(100% - 247px); /* opera */
    height: -webkit-calc(100% - 247px); /* google, safari */
    height: -moz-calc(100% - 247px); /* firefox */
    height: 100%;
    width: 77.5%;
    float: right;
    overflow: hidden;
    padding: 0.625rem;
}

#main h1{
    font-family: 'Times New Roman', Times, serif;
}

#main p{
    width: 100%;
    text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
<header 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>
    </header>
    <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">
</html>