时间戳

首页 > 解决方案 > 将 div 的高度设置为 100% 不会填满容器 div 的整个高度

html - 将 div 的高度设置为 100% 不会填满容器 div 的整个高度

问题描述

我一直试图在我的网站标题中垂直居中导航栏。这样做时，我需要将 id 为“navigation-bar-container”的 div 的高度设置为 100%。但是，这似乎并没有用 id “header”填充父 div 的整个高度。

索引.html

<!DOCTYPE html>
<html>
    <head>
        <title>Danny Watts</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" />
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1 id="title">Danny Watts</h1>
                <div id="navigation-bar-container">
                    <div id="navigation-bar">
                        <a href="/" class="navigation-bar-link">Homepage</a>
                    </div>
                </div>
            </div>
            <div id="body">
                <p>Welcome to my website!</p>
                <p>The font used is <a href="https://fonts.google.com/specimen/Source+Sans+Pro">Source Sans Pro</a>.</p>
            </div>
            <div id="footer">
                <p>&copy; 2020 Danny Watts</p>
            </div>
        </div>
    </body>
</html>

样式表.css

body {
    font-family: "Source Sans Pro", sans-serif;
}

body, a, p, h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

a {
    text-decoration: none;
}

#header {
    background-image: url("header-background-picture.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: rgb(255, 255, 255);
}

#title, .navigation-bar-link {
    float: left;
}

#header, #body, #footer {
    padding: 25px;
}

#footer {
    background-color: rgb(225, 225, 225);
    border-style: solid;
    border-width: 0px;
    border-top-width: 1px;
    border-color: rgb(200, 200, 200);
}

#navigation-bar-container {
    display: flex;
    height: 100%;
}

#navigation-bar {
    margin: auto;
    margin-left: 0px;
    margin-right: 0px;
}

标签： htmlcss

解决方案

height: 100%添加to是正确的，#navigation-bar-container但只有在这种情况下它是父元素的情况下才有效，#header在这种情况下我将它设置为60px.

我已经改变了和的颜色，header所以nav-bar-container你可以在下面更好地看到这个。

body {
    font-family: "Source Sans Pro", sans-serif;
}

body, a, p, h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}

a {
    text-decoration: none;
}

#header {
    background-image: url("header-background-picture.jpg");
    background-size: cover;
    height: 60px;
    background-color: green;
    background-position: center;
    overflow: hidden;
    color: rgb(255, 255, 255);
}

#title, .navigation-bar-link {
    float: left;
}

#header, #body, #footer {
    padding: 25px;
}

#footer {
    background-color: rgb(225, 225, 225);
    border-style: solid;
    border-width: 0px;
    border-top-width: 1px;
    border-color: rgb(200, 200, 200);
}

#navigation-bar-container {
    display: flex;
    height: 100%;
    background-color: yellow;
}

#navigation-bar {
    margin: auto;
    margin-left: 0px;
    margin-right: 0px;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Danny Watts</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" />
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1 id="title">Danny Watts</h1>
                <div id="navigation-bar-container">
                    <div id="navigation-bar">
                        <a href="/" class="navigation-bar-link">Homepage</a>
                    </div>
                </div>
            </div>
            <div id="body">
                <p>Welcome to my website!</p>
                <p>The font used is <a href="https://fonts.google.com/specimen/Source+Sans+Pro">Source Sans Pro</a>.</p>
            </div>
            <div id="footer">
                <p>&copy; 2020 Danny Watts</p>
            </div>
        </div>
    </body>
</html>

推荐阅读