内容div不固定

Question

内容div没有响应..

当浏览器的宽度和高度缩小时，它会覆盖页眉和页脚。

我也在使用flex (虽然不确定我是否正确使用它)

display: -webkit-box;
display: -ms-flexbox;
display: flex;

也许我用错了。

我也在使用内容作为背景视频的覆盖层。

我是不是重写了什么？请帮帮我！！

下面是Jsfiddle示例- jsfiddle

这是代码片段-

​

html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

#container {
  height: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

header {
  z-index: 1;
  position: fixed;
  top: 5%;
  width: 100%;
  height: 60px;
  padding: 0 30px;
  font-family: 'Century Gothic', serif;
}

header a {
  color: #fff;
  font-family: 'Century Gothic', serif;
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  text-decoration: none;
  font-weight: 700;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 95%;
  position: absolute;
  padding: 1% 2%;
  margin-top: 5%;
  margin-left: 2%;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  letter-spacing: 2px;
}

.quote {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 15%;
  text-align: center;
  color: #fff;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 3rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: lowercase;
}

footer {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 0;
  color: #fff;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  text-align: center;
  line-height: 60px;
  font-size: 15px;
}

<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<div id="container">
  <div class="overlay">
    <header>
      <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </header>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>

    </div>
    <div class="quote">get a quote!</div>
    <footer>copyright 2018</footer>
  </div>
</div>

​

我想要一个小箭头，在menus..to下面显示用户当前所在的页面。。

但它(再一次)没有被修复

下面是我使用的css代码：

.arrow {
  position: relative;
  background: #fff;
  display: inline-block;
  padding: 15px;
  color: #000;
  text-decoration: none;
  border-radius: 6px;
}
.arrow:after {
  position: absolute;
  bottom: 100%;
  right: 50%;
  margin-right: -9px;
  content: ' ';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  border-top: 10px solid transparent;
}

谢谢你！！

Answer 1

如果你想要响应式网站，那么你可以使用bootstrap。使用bootstrap很容易为你的网站做出响应式的布局。尝试下面的代码，如果它能帮助你的话：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

#container {
  height: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay {
  z-index: 1;

  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

header {
  z-index: 1;
  position: fixed;
  top: 5%;
  width: 100%;
  height: 60px;
  padding: 0 30px;
  font-family: 'Century Gothic', serif;
  clear:both;
}

header a {
  color: #fff;
  font-family: 'Century Gothic', serif;
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  text-decoration: none;
  font-weight: 700;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 95%;
  position: absolute;
  padding: 1% 2%;
  margin-top: 5%;
  margin-left: 2%;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  letter-spacing: 2px;
}

.quote {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 15%;
  text-align: center;
  color: #fff;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 3rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: lowercase;
}

footer {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 0;
  color: #fff;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  text-align: center;
  line-height: 60px;
  font-size: 15px;
}
  </style>
</head>
<body>

<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<div id="container-fluid">
  <div >

    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">home</a></li>
        <li><a href="#">about</a></li>
      </ul>
  </div>
  </div>
</nav>


    <div class='col-sm-12'>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>

    </div>
    </div>
    <div class="quote">get a quote!</div>
    <footer>copyright 2018</footer>
  </div>
</div>

</body>
</html>