html - 如何让 .header 和 .nav 固定在视口(viewport)的顶部？

标签 html css

我正在努力使 .header 和 .nav 始终保持在固定位置；有效地使它们永远不会从视口(viewport)中消失。

有趣的是，我正在使用 FlexBox，而且我从未听说过 FlexBox 实用程序可以让我将元素固定在视口(viewport)上。

目标:使 .header 和 .nav 在视口(viewport)中保持固定位置。

有人可以帮助我吗？

*{
  margin:0;
  font-family: 'Roboto', sans-serif;
}
.wrapper{
  width:100%;
  min-width: 960px;
  margin:0 auto;
  /*display:flex;
  align-items: flex-end;
  this is just for the night vision button to position better
  */
}
.parent{
  display:flex;
  flex-wrap: wrap;
  /*these two at the bottomr are optional to
  center them on the page
  max-width: 960px;
  margin:0 auto;*/
  max-width: 960px;
  margin: auto;
}

/*WE MISSED THE .ONE SELECTOR*/
.one{
  flex-grow: 1;
}
.title{
  text-align: center;
  position:relative;
  font-size: 50px;
  top:20px;
}

.header{
  height:100px;
  width:100%;
  order:0;
  border-bottom: 1px solid rgb(0,0,0);
  align-self: flex-start;
}

.banner{
  width:100%;
  min-width: 960px;
  height:500px;
  color:white;
  background-color: rgb(0,0,0);
  order:3;
}
.boxOne{
  width:45%;
  min-width: 200px;
  height:300px;
  border-right: 1px solid rgb(0,0,0);
  order:4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-left: 1px solid rgb(120,120,120);
  text-align: justify;
}
.boxTwo{
  width:45%;
  min-width: 200px;
  height:300px;
  order:4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-right: 1px solid rgb(120,120,120);
}
.footer{
  width:100%;
  height:100px;
  border-top: 1px solid rgb(0,0,0);
  border-bottom: 1px solid rgb(0,0,0);
  border-right: 1px solid rgb(120,120,120);
  border-left: 1px solid rgb(120,120,120);
  order:5;
}
.nbar{
display:flex;
-webkit-display:flex;
flex-wrap: wrap;
align-items: stretch;
flex-flow: wrap;
border-bottom: 1px solid rgb(0,0,0);
order:1;
}
  .two{
    flex-grow: 0;
  }
      .home {
        order:1;
      }
      .services {
        order:2;
      }
      .testimonials {
        order:3;
      }
      .portfolio {
        order:4;
      }
      .contact {
        order:5;
      }
li {
  display:inline-flex;
  padding:10px 40px 10px 60px;
  font-size: 15px;
  /*border: 1px solid rgb(0,0,0);*/
  /*text-align: center;
  align-content: stretch;*/
  justify-content: center;
  background-color: white;
  transition: background-color 0.08s linear;
}
li:hover {
color:white;
background-color: rgb(0,0,0);
}

a:link {
    text-decoration: none;
    color:black;
}

a:visited {
    text-decoration: none;
    color:black;
}
a:hover {
  text-decoration: underline;
  color:rgb(255,255,255);

}

.tt:link {
    text-decoration: none;
    color:black;
}

.tt:visited {
    text-decoration: none;
    color:black;
}
.tt:hover {
  text-decoration: none;
}


.disc{
  padding-left: 5px;
  padding-top: 5px;
  font-size: 10px;
  color: rgb(150,150,150);
}
.people{
  overflow: hidden;
  height:500px;
  width:960px;
}
/*.popup {
  background-color: white;
  height: 20px;
  width:90px;
  border: 1px solid rgb(255, 0, 0);
  position:fixed;
  bottom:0;
}*/
            /*Removed Mobile version support to allow visualization */
<!DOCTYPE html>
<html>
<!-- dockmann -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Dockmann Web Services">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Paul Aranguren">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="parent">
      <div class="one header">
        <a  class="tt" href="http://www.dockmann.com"><p class="title">DOCKMANN</p></a>
      </div>
      <!-- end header -->
      <div class="one nav">
        <ul class="nbar">
          <li class="two home">
            <a href="http://www.dockmann.com/">HOME</a>
          </li>
          <li class="two services">
            SERVICES
          </li>
          <li class="two testimonials">
            TESTIMONIALS
          </li>
          <li class="two portfolio">
            PORTFOLIO
          </li>
          <li class="two contact">
            CONTACT
          </li>
        </ul>
      </div>
      <!-- end nav -->
      <div class="one banner">
        <img class="people" src="image/macdesk.jpg" />
      </div>
      <!-- end banner -->
      <div class="one boxOne">
        <h2>Who we are...</h2>
        <br />
        
      </div>
      <!-- end boxOne -->
      <div class="one boxTwo">
      <h2>Where we are</h2>
      </div>
      <!-- end boxTwo -->
      <div class="one footer">
      <p class="disc">
      Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp",
      "us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the <thead>
      use of any product shown on this site. <br />This site is purely intended to provide the service mentioned in our page.
      </thead>
Dockmann Corp. All rights reserved. ©2016
      </p>
      </div>
      <!-- end footer -->

    </div>

    <!-- <button class="popup">
      Night Vision!
    </div> -->
  </div>

</body>
</html>

最佳答案

display:flex 和 position:absolute/relative 和 fixed 不相配。

要使标题和导航栏固定，用一个 div 包裹它并设置它的位置:固定。我稍微更改了您的标记

检查下面的片段

* {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
.wrapper {
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
  /*display:flex;
  align-items: flex-end;
  this is just for the night vision button to position better
  */
}
.parent {
  display: flex;
  flex-wrap: wrap;
  /*these two at the bottomr are optional to
  center them on the page
  max-width: 960px;
  margin:0 auto;*/
  max-width: 960px;
  margin: auto;
}
.header-content {
  position: fixed;
}
.content-2 {
  position: absolute;
  top: 170px;
}
/*WE MISSED THE .ONE SELECTOR*/

.one {
  flex-grow: 1;
}
.title {
  text-align: center;
  position: relative;
  font-size: 50px;
  top: 20px;
}
.header {
  height: 100px;
  width: 100%;
  order: 0;
  border-bottom: 1px solid rgb(0, 0, 0);
  align-self: flex-start;
}
.banner {
  width: 100%;
  min-width: 960px;
  height: 500px;
  color: white;
  background-color: rgb(0, 0, 0);
  order: 3;
}
.boxOne {
  width: 45%;
  min-width: 200px;
  height: 300px;
  border-right: 1px solid rgb(0, 0, 0);
  order: 4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-left: 1px solid rgb(120, 120, 120);
  text-align: justify;
}
.boxTwo {
  width: 45%;
  min-width: 200px;
  height: 300px;
  order: 4;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  border-right: 1px solid rgb(120, 120, 120);
}
.footer {
  width: 100%;
  height: 100px;
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  border-right: 1px solid rgb(120, 120, 120);
  border-left: 1px solid rgb(120, 120, 120);
  order: 5;
}
.nbar {
  display: flex;
  -webkit-display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid rgb(0, 0, 0);
  order: 1;
}
.two {
  flex-grow: 0;
}
.home {
  order: 1;
}
.services {
  order: 2;
}
.testimonials {
  order: 3;
}
.portfolio {
  order: 4;
}
.contact {
  order: 5;
}
li {
  display: inline-flex;
  padding: 10px 40px 10px 60px;
  font-size: 15px;
  /*border: 1px solid rgb(0,0,0);*/
  /*text-align: center;
  align-content: stretch;*/
  justify-content: center;
  background-color: white;
  transition: background-color 0.08s linear;
}
li:hover {
  color: white;
  background-color: rgb(0, 0, 0);
}
a:link {
  text-decoration: none;
  color: black;
}
a:visited {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 255);
}
.tt:link {
  text-decoration: none;
  color: black;
}
.tt:visited {
  text-decoration: none;
  color: black;
}
.tt:hover {
  text-decoration: none;
}
.disc {
  padding-left: 5px;
  padding-top: 5px;
  font-size: 10px;
  color: rgb(150, 150, 150);
}
.people {
  overflow: hidden;
  height: 500px;
  width: 960px;
}
/*.popup {
  background-color: white;
  height: 20px;
  width:90px;
  border: 1px solid rgb(255, 0, 0);
  position:fixed;
  bottom:0;
}*/

/*Removed Mobile version support to allow visualization */
<html>
<!-- dockmann -->

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta name="description" content="Dockmann Web Services">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="Paul Aranguren">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <div class="wrapper">
    <div class="parent">
      <div class="header-content">
        <div class="one header">
          <a class="tt" href="http://www.dockmann.com">
            <p class="title">DOCKMANN</p>
          </a>
        </div>
        <!-- end header -->
        <div class="one nav">
          <ul class="nbar">
            <li class="two home">
              <a href="http://www.dockmann.com/">HOME</a>
            </li>
            <li class="two services">
              SERVICES
            </li>
            <li class="two testimonials">
              TESTIMONIALS
            </li>
            <li class="two portfolio">
              PORTFOLIO
            </li>
            <li class="two contact">
              CONTACT
            </li>
          </ul>
        </div>
      </div>
      <div class="content-2">
        <!-- end nav -->
        <div class="one banner">
          <img class="people" src="image/macdesk.jpg" />
        </div>
        <!-- end banner -->
        <div class="one boxOne">
          <h2>Who we are...</h2>
          <br />

        </div>
        <!-- end boxOne -->
        <div class="one boxTwo">
          <h2>Where we are</h2>
        </div>
        <!-- end boxTwo -->
        <div class="one footer">
          <p class="disc">
            Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp", "us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the
            <thead>
              use of any product shown on this site.
              <br />This site is purely intended to provide the service mentioned in our page.
            </thead>
            Dockmann Corp. All rights reserved. ©2016
          </p>
        </div>
        <!-- end footer -->
      </div>

    </div>

    <!-- <button class="popup">
      Night Vision!
    </div> -->
  </div>

</body>

</html>

希望对你有帮助

关于html - 如何让 .header 和 .nav 固定在视口(viewport)的顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40823493/

上一篇：jquery - 如何限制每个 session 显示一次预加载器？

下一篇：html - Bootstrap 导航栏对于页面来说太大了

相关文章：

css - Bootstrap/KendoUI/LocalHost 工作正常，但不是域名

html - 使用纯 CSS 的增量 CSS 持续时间

javascript - 如何一起使用 onmousedown 和 onchange

html 内容特定的 css 标签

javascript - 动画 ->向左滑动不工作jQuery

c# - HTML 文件输入的样式文本框

javascript - 具有三个 div 的响应栏

html - 是否可以将 HTML 表格行分成多行？

html - 按钮并联怎么做

html - 登录表单，复选框后的文本

©2024 IT工具网  联系我们