Fatal编程技术网
  • html/
  • HTML，CSS-两个元素等于100vh

HTML，CSS-两个元素等于100vh

html css

HTML，CSS-两个元素等于100vh,html,css,height,display,Html,Css,Height,Display,我想做div（这将是一个容器）。在这个分区中，我有导航栏和另一个分区（这是背景img）。我的集装箱有100vh。导航栏没有高度。现在，我想将“剩余的100vh”作为背景分区。我的主要html如下所示： <!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> </head> <body> <div class="head-container"

我想做div（这将是一个容器）。在这个分区中，我有导航栏和另一个分区（这是背景img）。我的集装箱有100vh。导航栏没有高度。现在，我想将“剩余的100vh”作为背景分区。我的主要html如下所示：

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">

</head>

<body>

<div class="head-container">
    <header>
        <img class="logo" src="css/873438.jpg" alt='logo' />
        <nav>
            <ul class="nav_links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
            <a class="cta" href="#"><button>Add post</button></a>
    </header>

    <div class="background">


    </div>

</div>
</body>
</html>
背景div有969像素的高度，就像我的整个窗口一样。我想为这两部电影制作100vh。我做错了什么？

我们可以将我们的div与位置重叠：绝对

.background {
    height: 100vh;
    background-color: gray;
    position: absolute;  /* To over lap the page */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;  /* To put image to background */
}
注意：
标记不使用也不需要结束斜杠，而且在HTML中从未使用过。 
.background {
    height: 100vh;
    background-color: gray;
    position: absolute;  /* To over lap the page */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;  /* To put image to background */
}