Question

请参阅Pitchfork网站上的此页面了解上下文：http://pitchfork.com/best/

当导航和页脚保持固定时，主要内容会滚动。我已经尝试过无数次重建它，但我很难过。

感谢任何对CSS更熟练的人能指出我正确的方向。

Answer 1

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_fixed

您需要的主电源是：

width: 100%; position: fixed;

对于页脚，我猜测它正在使用

z-index: -1

基本上将navbar z-index设置为sth high，内容设置为1,2（取决于您的设计），并将页脚设置为低于其他所有内容。

取决于您的意图，您可能会使用一些javascript

var elementPosition = $('#navbar').offset();

$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition.top){
            $('#navbar').css('position','fixed').css('z-index','9').css('width','100%').css('top','0');
        } else {
            $('#navbar').css('position','relative').css('top','0');
        }    
});

＆＃13;

body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

#main {
position: relative;
    z-index: 10;
    background: #f7f7f7;
      margin-bottom: 20rem;}

＆＃13;

<div id="main">

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</div>
<div id="footer">
<h3>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</h3>
</div>

＆＃13;

Answer 2

编辑：我实际构建了原型，看一下片段！

标题可能是这样的：

header {
    position:fixed;
    width:100%;
    top:0;
    left:0;
}

页脚......我要做的是：

footer {
    width:100vh;
    display:flex;
    align-items: flex-end;
    z-index:-1;
}

然后页脚内部会有一个实际内容的容器，与底部对齐。

至于页脚显示，您可以在内容区域添加margin-bottom，或者只添加具有一定高度的透明div，以启用滚动并显示内容结束的页脚。

* {
  margin:0;
  padding:0;
  
}

header {
  width: 100%;
  background: #1a1a1a;
  position:fixed;
  top:0;
  left:0;
}

footer {
  height:100vh;
  background: purple;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: fixed;
  width:100%;
  bottom:0;
  left:0;
  z-index:-1;
}

.footer-content {
  
}

.content {
  background: yellow;
  font-size: 40px;
}

.empty-div {
  background:transparent;
  width: 100%;
  height: 300px;
}

<header>
  asdasdasd <br>
  asd
</header>

<div class="content">
  <p>sdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf assdafas dfas fasdf asdfasdf asd fsadf sad fsadf sad fas dfasdf sadf asdf asdf as</p>
 
</div>
 <div class="empty-div"></div>
<footer>
  <div class="footer-content">
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
    some stuff about copyright
  </div>
</footer>

Answer 3

这应该让你知道如何去做它

＆＃13;

.nav {
  width: 100%;
  height: 50px;
  background: #1a1a1a;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5);
  position: fixed;
  z-index: 999999;
}
.content {
  width: 100%;
  height: 1000px;
  background: #271021;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5);
  margin-bottom: 200px;
}
.footer {
  width: 100%;
  height: 400px;
  background: #1b0b17;
  bottom: 0;
  position: fixed;
  z-index: -1;
}

＆＃13;

<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

＆＃13;

Answer 4

保持位置固定位置：固定; 你也可以试试position：absolute; z-index决定哪个层保持在顶部，哪个层保持在底部。的z-index：2;

如何相对于固定的导航和页脚移动主要内容

4 个答案: