Question

我对CSS仍然不太熟悉，仍在研究CSS并通过YouTube进行设计。

如果导航条的位置为绝对位置，则导航条仅会停留在底部。问题来了：如何将内容放在导航栏旁边？最重要的是，我放在其下面的内容不会使页面扩展更多的空间/也无法让我滚动。

我试图通过调整位置，浮动等来解决这个问题，但我仍然陷入困境。原谅我的无知，并感谢您的帮助。

/* Background slider */
@font-face {
  font-family: 'Bebas-Neue';
  src: url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
}

.slide-1,.slide-2,.slide-3 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	background-attachment:fixed;
}

.slider .line {
	position: absolute;
	width: 98%;
	height: auto;
	bottom: 40%;
	margin: 10px;
	z-index:999;
}

.slider .slider-caption {
  	font-family:Oswald;
	height: 0%;
	bottom:25%;
	left:16px;
	text-transform:uppercase;
	font-size:50px;
	min-height: 80px;
	position: absolute;	
	font-weight:bold;
	z-index:999;
}

.slider .slider-description {
  	font-family:Oswald;
	bottom:20%;
	left:16px;
	font-size:15px;
	height:0%;
	position: absolute;
	z-index:999;
}

.slide-1 {
	background-image:url('../image/01_contentslider_1.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	animation: fade-1 12s infinite;
	-webkit-animation: fade-1 12s infinite;
}

.slide-2 {
	background-image:url('../image/01_contentslider_2.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	animation: fade-2 12s infinite;
	-webkit-animation: fade-2 12s infinite;
}

.slide-3 {
	background-image:url('../image/01_contentslider_3.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	animation: fade-3 12s infinite;
	-webkit-animation: fade-3 12s infinite;
}

@-webkit-keyframes fade-1 {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fade-1 {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-2 {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fade-2 {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fade-3 {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fade-3 {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.transparency { /*Opacity 50*/
    position: relative;
	width: 100%;
	height: 100%;
	background:url('../image/00_Transparent.png');
	top: 0;
	bottom:0;
    z-index: -1000;
	overflow:hidden;
}

/* Sticky Nav Bar Settings */

.content-layer {
	position: absolute;
	bottom:0;
	float:left;
	padding:0;
}

#nav-bar {
  	overflow: hidden;
  	background-color: #333;
  	position:relative;
  	float:left;
  	width: 100%;
  	padding: 0;
  	bottom:0;
  	z-index:999;
}

#nav-bar a {
  	float: left;
  	display: block;
  	color: #f2f2f2;
  	text-align: center;
  	padding: 14px 16px;
  	text-decoration: none;
  	font-size: 17px;
}

#nav-bar ul {
    list-style: none;
    width: 800px;
    margin: 0 auto;
    padding: 0; 
    margin-left: 350px;
}

#nav-bar li {
    float: left; 
}

#nav-bar a:hover {
  	background-color: #ddd;
  	color: black;
}

#nav-bar li a {
    display: block;
    padding: 10px 25px;
    text-decoration: none;
    font-family: "Arial";
    color: #4c4c4c;
    border-right: 1px solid #4c4c4c; 
}

#nav-bar a.active {
  	background-color: #4CAF50;
  	color: white;
}

.page-content {
  	padding: 16px;
  	z-index: 999;
	bottom: 0;
	overflow:hidden;
	position:relative;
}

.sticky {
  	position: fixed;
  	top: 0;
  	width: 100%;
}

.sticky + .page-content {
  	padding-top: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Home | Reise Web-Portal </title>
  <link rel="stylesheet" type="text/css" href="vendor/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="css/00_Fundamentals.css">
  <link rel="stylesheet" type="text/css" href="css/02_Parallax_Slider.css">
  <link rel="stylesheet" href="css/00_Loading....css" type="text/css">
  <link rel="stylesheet" type="text/css" href="css/00_Bebas_Neue_Font.css">
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/prototype.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,600' rel='stylesheet' type='text/css'>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <!-- Loading Script -->
  <script type="text/javascript">
    $(window).on('load', function() {
      $('.preloader').addClass('complete')
    })
  </script>
</head>

<body>

  <!-- Loading the Page OP -->
  <div class="preloader">
    <div class="loader">
    </div>
  </div>
  <!-- Loading the Page ED -->

  <script type="text/javascript">
    // Appearance of all content     
    $(function() {
      setTimeout(function() {
        $('.showcase').removeClass('hidden');
      }, 4500);
    })();
  </script>
  <div class="page">
    <span class="menu-toggle">
		<i class="menu-open fa fa-bars fa-lg"></i>
		<i class="menu-close fa fa-times fa-lg"></i>
	</span>

    <ul class="menu-items">
      <img class="menu-logo-pic" alt="Reise Web-Portal" src="image/00_Logo_2.png">
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <!-- Stuff inside the page -->
    <div class="content">
      <!-- Home Page -->
      <div class="background-slide">
        <!-- Slide Show -->
        <div class="slider">
          <div class="slide-1">
            <div class="transparency">
              <div class="line">
                <hr>
              </div>
              <div class="slider-caption">
                <h4>Start Your Journey</h4>
              </div>
              <div class="slider-description">
                <h2>Now or never.</h2>
              </div>
            </div>
          </div>
          <div class="slide-2">
            <div class="transparency">
              <div class="line">
                <hr>
              </div>
              <div class="slider-caption">
                <h4>Enjoy your life without regrets</h4>
              </div>
              <div class="slider-description">
                <h2>By understanding the world in a greater depth.</h2>
              </div>
            </div>
          </div>
          <div class="slide-3">
            <div class="transparency">
              <div class="line">
                <hr>
              </div>
              <div class="slider-caption">
                <h4>Reach the sky with your hands</h4>
              </div>
              <div class="slider-description">
                <h2>Fuck this shit.</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="nav-bar">
        <ul>
          <li><a href="javascript:void(0)">Home</a></li>
          <li><a href="javascript:void(0)">News</a></li>
          <li><a href="javascript:void(0)">Contact</a></li>
        </ul>
      </div>
      <div class="page-content">
        <h3>Sticky Navigation Example</h3>
        <p>The navbar will stick to the top when you reach its scroll position.</p>
      </div>
    </div>
  </div>
  <!-- Sticky Nav Bar Script -->
  <script type="text/javascript">
    window.onscroll = function() {
      myFunction()
    };

    var navbar = document.getElementById("nav-bar");
    var sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }
  </script>

  <!-- Off Canvas Script -->
  <script type="text/javascript">
    var $page = $('.page');

    $('.menu-toggle').on('click', function() {
      $page.toggleClass('shazam');
    });

    $('.content').on('click', function() {
      $page.removeClass('shazam');
    });
  </script>
</body>

</html>

/*02_Parallax_Slider.css*/


/* Background slider */

@font-face {
  font-family: 'Bebas-Neue';
  src: url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
}

.slide-1,
.slide-2,
.slide-3 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-attachment: fixed;
}

.slider .line {
  position: absolute;
  width: 98%;
  height: auto;
  bottom: 40%;
  margin: 10px;
  z-index: 999;
}

.slider .slider-caption {
  font-family: Oswald;
  height: 0%;
  bottom: 25%;
  left: 16px;
  text-transform: uppercase;
  font-size: 50px;
  min-height: 80px;
  position: absolute;
  font-weight: bold;
  z-index: 999;
}

.slider .slider-description {
  font-family: Oswald;
  bottom: 20%;
  left: 16px;
  font-size: 15px;
  height: 0%;
  position: absolute;
  z-index: 999;
}

.slide-1 {
  background-image: url('../image/01_contentslider_1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  animation: fade-1 12s infinite;
  -webkit-animation: fade-1 12s infinite;
}

.slide-2 {
  background-image: url('../image/01_contentslider_2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  animation: fade-2 12s infinite;
  -webkit-animation: fade-2 12s infinite;
}

.slide-3 {
  background-image: url('../image/01_contentslider_3.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  animation: fade-3 12s infinite;
  -webkit-animation: fade-3 12s infinite;
}

@-webkit-keyframes fade-1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fade-3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-3 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.transparency {
  /*Opacity 50*/
  position: relative;
  width: 100%;
  height: 100%;
  background: url('../image/00_Transparent.png');
  top: 0;
  bottom: 0;
  z-index: -1000;
  overflow: hidden;
}


/* Sticky Nav Bar Settings */

.content-layer {
  position: absolute;
  bottom: 0;
  float: left;
  padding: 0;
}

#nav-bar {
  overflow: hidden;
  background-color: #333;
  position: relative;
  float: left;
  width: 100%;
  padding: 0;
  bottom: 0;
  z-index: 999;
}

#nav-bar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#nav-bar ul {
  list-style: none;
  width: 800px;
  margin: 0 auto;
  padding: 0;
  margin-left: 350px;
}

#nav-bar li {
  float: left;
}

#nav-bar a:hover {
  background-color: #ddd;
  color: black;
}

#nav-bar li a {
  display: block;
  padding: 10px 25px;
  text-decoration: none;
  font-family: "Arial";
  color: #4c4c4c;
  border-right: 1px solid #4c4c4c;
}

#nav-bar a.active {
  background-color: #4CAF50;
  color: white;
}

.page-content {
  padding: 16px;
  z-index: 999;
  bottom: 0;
  overflow: hidden;
  position: relative;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.page-content {
  padding-top: 60px;
}


/* 00_Fundamentals.CSS */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Comfortaa;
}

body {
  color: white;
}

.page {
  height: 200%;
  background-color: #000;
}

.content {
  height: 50%;
  transform-origin: top left;
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}

.content-inner {
  height: 100%;
  overflow-y: auto;
  line-height: 30px;
  background-color: white;
}

.menu-toggle {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  cursor: pointer;
  width: 80px;
  height: 80px;
  background-color: gray;
  border-bottom-right-radius: 100%;
}

.menu-toggle:active i {
  opacity: 0.8;
}

.menu-toggle i {
  color: #f0f0f0;
}

.menu-toggle .menu-open,
.menu-toggle .menu-close {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: : -12px;
  transition: transform 0.7s cubic-bezier(1, 0.005, 0.25, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.25, 1);
}

.menu-toggle .menu-open {
  transform-origin: -100px -100px;
}

.menu-toggle .menu-close {
  transform: rotate(20deg);
  transform-origin: -100px -160px;
}

.menu-items {
  position: fixed;
  bottom: 0;
  left: 50px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu-items li {
  height: 60px;
  margin-bottom: 30px;
  transform: translateX(-300px);
  transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
}

.menu-items li:nth-child(2) {
  margin-left: 40px;
}

.menu-items li:nth-child(3) {
  margin-left: 80px;
}

.menu-items li:nth-child(4) {
  margin-left: 160px;
}

.menu-items a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  transition: color .2s;
}

.menu-items a:hover {
  color: #f0f0f0;
}


/* the class to Open the menu */

.shazam .content {
  transform: rotate(-30deg);
}

.shazam .menu-open {
  transform: rotate(-20deg);
  opacity: 0;
  transition: 0.7s;
}

.shazam .menu-close {
  transform: rotate(0);
}

.shazam .menu-items li {
  transform: translateX(0);
  transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shazam .menu-items li:nth-child(2) {
  transition-delay: .47s;
}

.shazam .menu-items li:nth-child(3) {
  transition-delay: .48s;
}

h1 {
  padding-bottom: 16px;
  border-bottom: 1px solid #ddd;
}

.menu-logo-pic {
  width: 55%;
  height: 55%;
  opacity: 0;
  display: block;
  position: relative;
  pointer-events: none;
  transition: .6s;
  left: -90px;
}

.shazam .menu-items .menu-logo-pic {
  opacity: 1;
  transition: .6s;
}


/* Footer */

.center {
  text-align: center;
  margin: auto;
}

.bg-light {
  background: #f4f4f4;
  color: #333;
}

.bg-dark {
  background: #333;
  color: #f4f4f4;
}

footer {
  padding: 2.2rem;
  position: relative;
  bottom: 0;
}

footer p {
  margin: 0;
}

.newone {
  vertical-align: center;
  text-align: center;
}

.row {
  margin: 0 auto;
  max-width: 840px;
  font-family: Arial;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Home | Reise Web-Portal </title>
  <link rel="stylesheet" type="text/css" href="vendor/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="css/00_Fundamentals.css">
  <link rel="stylesheet" type="text/css" href="css/02_Parallax_Slider.css">
  <link rel="stylesheet" href="css/00_Loading....css" type="text/css">
  <link rel="stylesheet" type="text/css" href="css/00_Bebas_Neue_Font.css">
  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/prototype.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,600' rel='stylesheet' type='text/css'>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <!-- Loading Script -->
  <script type="text/javascript">
    $(window).on('load', function() {
      $('.preloader').addClass('complete')
    })
  </script>
</head>

<body>

  <!-- Loading the Page OP -->
  <div class="preloader">
    <div class="loader">
    </div>
  </div>
  <!-- Loading the Page ED -->

  <script type="text/javascript">
    // Appearance of all content     
    $(function() {
      setTimeout(function() {
        $('.showcase').removeClass('hidden');
      }, 4500);
    })();
  </script>
  <div class="page">
    <span class="menu-toggle">
		<i class="menu-open fa fa-bars fa-lg"></i>
		<i class="menu-close fa fa-times fa-lg"></i>
	</span>

    <ul class="menu-items">
      <img class="menu-logo-pic" alt="Reise Web-Portal" src="image/00_Logo_2.png">
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
    <!-- Stuff inside the page -->
    <div class="content">
      <!-- Home Page -->
      <div class="background-slide">
        <!-- Slide Show -->
        <div class="slider">
          <div class="slide-1">
            <div class="transparency">
              <div class="line">
                <hr>
              </div>
              <div class="slider-caption">
                <h4>Start Your Journey</h4>
              </div>
              <div class="slider-description">
                <h2>Now or never.</h2>
              </div>
            </div>
          </div>
          <div class="slide-2">
            <div class="transparency">
              <div class="line">
                <hr>
              </div>
              <div class="slider-caption">
                <h4>Enjoy your life without regrets</h4>
              </div>
              <div class="slider-description">
                <h2>By understanding the world in a greater depth.</h2>
              </div>
            </div>
          </div>
          <div class="slide-3">
            <div class="transparency">
              <div class="line">
                <hr>
              </div>
              <div class="slider-caption">
                <h4>Reach the sky with your hands</h4>
              </div>
              <div class="slider-description">
                <h2>Fuck this shit.</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="nav-bar">
        <ul>
          <li><a href="javascript:void(0)">Home</a></li>
          <li><a href="javascript:void(0)">News</a></li>
          <li><a href="javascript:void(0)">Contact</a></li>
        </ul>
      </div>
      <div class="page-content">
        <h3>Sticky Navigation Example</h3>
        <p>The navbar will stick to the top when you reach its scroll position.</p>
      </div>
    </div>
  </div>
  <!-- Sticky Nav Bar Script -->
  <script type="text/javascript">
    window.onscroll = function() {
      myFunction()
    };

    var navbar = document.getElementById("nav-bar");
    var sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }
  </script>

  <!-- Off Canvas Script -->
  <script type="text/javascript">
    var $page = $('.page');

    $('.menu-toggle').on('click', function() {
      $page.toggleClass('shazam');
    });

    $('.content').on('click', function() {
      $page.removeClass('shazam');
    });
  </script>
</body>

</html>

Answer 1

如果您希望导航栏始终保持在屏幕底部，而不考虑窗口的大小调整/大小，并且其下方向下滚动一些其他内容，则可能需要使用 vh 属性（表示视图高度），如下所示：

<div style="display:flex;flex-direction:column;height:100vh;background:red;">
      <div style="display:flex;flex-direction:column;align-self:flex-start;flex-grow:2;">
        //Your upper content
      </div>
      <div style="display:flex;align-self:flex-start;height:80px;">
        //Your nav bar
      </div>
    </div>
    <div style="height:300px;background:gray;">
      //rest of the stuff below
    </div>

如何将内容放置在绝对位置下？

1 个答案: