我希望导航栏在页面加载时位于窗口底部(但它会在滚动时粘在顶部，所以我无法固定其位置)。我唯一想到的是将背景 div 高度设为 100vh 减去导航栏高度，但它会创建奇怪的白色填充，而不是将导航向上移动。
此外，我如何才能在我的 .navigation 中(以及在 .tester 中)垂直居中元素？ Logo 必须位于左侧，而导航必须位于右侧。
代码如下:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:bold;
}
.header-wrapper {
background-image: url("images/backgrounds/typography.jpg");
background-size:cover;
background-position:center;
min-height:calc(100vh - 6em - 100px);
text-align:center;
padding-top:6em;
margin:0 auto;
position:relative;
}
.tester{
position:absolute;
width:100%;
display:flex;
bottom:50px;
margin: auto;
align-items: center;
justify-content: center;
}
.tester a{
margin-left:1em;
margin-right:1em;
opacity: 0.75;
}
.tester a:hover{
opacity:1;
}
.slider-buttons {
position:absolute;
max-width:1170px;
}
.typography {
bottom: 100px;
left:auto;
}
.navigation {
max-width:1170px;
margin:0 auto;
height:94px;
background-color:white;
bottom:0;
}
nav {
float:right;
text-transform:uppercase;
}
nav a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
}
nav #home:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover {
color:white;
}
nav #home:hover {
background-color:#dfbb42;
}
nav #menu2:hover {
background-color:#c43434;
}
nav #menu3:hover {
background-color:#508b61;
}
nav #menu4:hover {
background-color:#428d9e;
}
nav #menu5:hover {
background-color:#575fbd;
}
#logo {
float:left;
margin-left:30px;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Lorem ipsum sit dolor amet</h1>
<div class="tester">
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
</a>
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
</a>
</div>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
<a href="" target="_top" id="home">Home</a>
<a href="" id="menu2">Menu 2</a>
<a href="" id="menu3">Menu 3</a>
<a href="" id="menu4">Menu 4</a>
<a href="" id="menu5">Menu 5</a>
</nav>
<img src="css/images/logo.png" alt="Logo" id="logo">
</div>
</section>最佳答案
我想这只能用 JS 来完成，所以你可以根据窗口偏移量更改导航位置。
关于html - div 定位不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41782460/