Question

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

index.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>

stylesheet.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;
}

Answer 1

通过在<Wrapper addFunc={this.addFunc} selectedData={this.selectedData} />上添加height: 100%是正确的，但是只有在这种情况下#navigation-bar-container具有固定高度的情况下，它才有效，在这种情况下我将其设置为{{ 1}}。

我更改了#header和60px的颜色，因此您可以在下面更好地看到它。

header

nav-bar-container

将div的高度设置为100％不会填充容器div的整个高度

1 个答案: