stackoom
  简体   繁体   中英

How can I make the .header and .nav stay fixed on the top of the viewport?

 原文  2016-11-26 21:46:34  6   1    html/ css

Question

I am trying to make it so the .header and .nav always stay in a fixed position; effectively so that they never disappear from the viewport.

The interesting part is that I am using FlexBox, and I have never heard of a FlexBox utility that allows me to keep an item fixed to the viewport.

Objective: Make the .header and .nav stay in a fixed position in the viewport.

Can someone help me? 

 *{ 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>

1 answers

solution1
 1 ACCPTED  2016-11-26 22:02:39

display:flex and position:absolute/relative and fixed does not go together.

To make the header and nav bar fixed ,wrap it with a div and set its position:fixed. I have changed your markup a bit

check the following snippet 

 * { 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>

hope it helps

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I make a fixed background image not stay fixed on scroll? How can I make a fixed vertical nav bar float to the top when the window shrinks? How can I put a fixed logo in the nav bar at the top? how to make a fixed nav flush with the top of the window How can I stick my <nav> to the top right of my header? How can I make a header with a fixed position? How can I make an image bar to stay on top with the menu on mobile? How can I make this fixed nav stop flashing? Nav bar won't stay in header when made smaller. How can I achieve this? How can I make the vertical scrollbar stay in viewport while its horizontal content overflows?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM