Question

我正在建立我的个人网站，我想在索引页面中包含背景视频，然后使用引导程序将网站的标题和导航栏并排放置在大屏幕中，并在每个屏幕下方其他在中等或较小的屏幕上显示，但是每当我缩小页面时，它们最终就会重叠。

我认为问题可能出在视频大小或文字位置上。每当我声明我的div相对于视频的位置大于屏幕允许进行侧向滚动的屏幕时，我都不希望这样做，但是当我将它们设置为相对时，它们的行为就正确了。将其位置设置为固定可避免侧面滚动，但会导致重叠。

body, html{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	width: 100%;
	height: 100%;
}
#home_vid{
	position: fixed;
	margin:0;
	top:0;
    left:0;
	min-width: 100%;
	width: 100%;
	min-height: 100%;
	max-height: 100%;
	box-sizing: border-box;
	object-fit: cover;
}

#header_home{
	color: green;
	position: fixed;
}

#nav{
	margin: 0;
	position: fixed;
	padding-top: 1%;
}

ul#nav {
	padding-top: 1%;
	font-size: 0;
	box-sizing: border-box;


}
ul#nav li{
	text-align: center;
	display: inline-block;
	border-collapse: collapse;
	padding-right: 1%;


}

ul#nav li a{
	color: white;
	text-transform: uppercase;
    text-decoration: none;
    font-size: calc(2vw + 40%);
}

ul#nav li:hover{
	background-color: rgba(255,255,255,0.2);
}
body #nav:hover{
	display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Home | My Website</title>
	<link rel="stylesheet" type="text/css" href="home.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<video autoplay muted loop id="home_vid" src = "videos/website_home.mp4">
	</video>
	<div class="row">
		<div class="col-lg-3 col-md-12"><div id="header_home"> My Website</div></div>
		<div class="col-lg-9 col-md-12">
		<ul id = "nav">
			<li><a href="">About Me</a></li>
			<li><a href="">Lived</a></li>
			<li><a href="">Visited</a></li>
			<li><a href="">Interests</a></li>
			<li><a href="">College</a></li>
			<li><a href="">Contact</a></li>
		</ul>
	</div>
</div>
</body>
</html>

这是视频

https://www.dropbox.com/s/l6jyaohgwvcpp9i/website_home.mp4?dl=0

这是两种可能性：我将为每种可能性加粗首选的行为。

相对位置：

您可以在底部看到侧面滚动条 https://www.dropbox.com/s/r6gj5kc0kyoa6gg/Screen%20Shot%202019-04-03%20at%2011.07.00%20AM.png?dl=0

但是，当您将屏幕缩小时，该元素会彼此重叠 https://www.dropbox.com/s/yoamtz66hj79dfq/Screen%20Shot%202019-04-03%20at%2011.07.25%20AM.png?dl=0

固定位置：

没有侧面滚动 https://www.dropbox.com/s/5xmt0mgrwean90d/Screen%20Shot%202019-04-03%20at%2011.06.21%20AM.png?dl=0

但是较小的屏幕重叠 https://www.dropbox.com/s/y0499kbddavh5ex/Screen%20Shot%202019-04-03%20at%2011.07.51%20AM.png?dl=0

Answer 1

在header div中添加了一个类row，并添加到了CSS之下。

.header {
  position: fixed;
  top: 0;
}

body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
}

#home_vid {
  position: fixed;
  margin: 0;
  top: 0;
  left: 0;
  min-width: 100%;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  object-fit: cover;
}

#header_home {
  color: green;
}

.header {
  position: fixed;
  top: 0;
}


#nav {
  margin: 0;
  position: fixed;
  padding-top: 1%;
}

ul#nav {
  padding-top: 1%;
  font-size: 0;
  box-sizing: border-box;
}

ul#nav li {
  text-align: center;
  display: inline-block;
  border-collapse: collapse;
  padding-right: 1%;
}

ul#nav li a {
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  font-size: calc(2vw + 40%);
}

ul#nav li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

body #nav:hover {
  display: block;
}

.body {
    margin-top: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Home | My Website</title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <video autoplay muted loop id="home_vid" src="videos/website_home.mp4">
	</video>
  <div class="row header">
    <div class="col-lg-3 col-md-12 brand-name">
      <div id="header_home"> My Website</div>
    </div>
    <div class="col-lg-9 col-md-12 navbar" >
      <ul id="nav">
        <li><a href="">About Me</a></li>
        <li><a href="">Lived</a></li>
        <li><a href="">Visited</a></li>
        <li><a href="">Interests</a></li>
        <li><a href="">College</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
    
  </div>
  
  <div class="body">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</body>

</html>

Answer 2

删除build.sbt。也许最后您的标头将需要它，但是我看到了针对3个不同元素的规则。这肯定有助于堆叠布局行为。

屏幕尺寸较小时，列重叠

2 个答案: