粘性页脚，标题，导航和与网格asdide

我正在写我自己的响应式网格，我想要在页面的顶部和页脚顶部（与社交网站链接）下面的页脚制作粘贴标题与导航 - 在他们之间的部分内容。我怎么做？我发现了几个选项，但其中大多数都使用flexbox（与某些浏览器不兼容）或px中的固定高度（不响应）。粘性页脚，标题，导航和与网格asdide

这是我的HTML和CSS：

*, 
 
*:after, 
 
*:before { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100vh; 
 
} 
 
body { 
 
    min-height: 100%; 
 
} 
 
.row:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
main { 
 
    margin: auto; 
 
    min-height: 100%; 
 
    max-width: 1140px; 
 
} 
 
* html main { 
 
    height: 100%; 
 
} 
 
header { 
 
    height: 10%; 
 
    min-height: 10%; 
 
    width: 100%; 
 
    top: 0; 
 
} 
 
nav { 
 
    height: 5%; 
 
    min-height: 5%; 
 
    position: relative; 
 
} 
 
section { 
 
    height: 70%; 
 
    min-height: 70%; 
 
} 
 
aside { 
 
    height: 10%; 
 
    min-height: 10%; 
 
} 
 
footer { 
 
    width: 100%; 
 
    height: 5%; 
 
    min-height: 5%; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    overflow: hidden; 
 
} 
 
[class*='col-'] { 
 
    float: left; 
 
    position: relative; 
 
} 
 
[class*='col-']:last-of-type { 
 
    padding-right: 0; 
 
} 
 
.col-1 { 
 
    width: 8.333333333333333%; 
 
} 
 
.col-2 { 
 
    width: 16.66666666666667%%; 
 
} 
 
.col-1-5 { 
 
    width: 20%; 
 
} 
 
.col-3 { 
 
    width: 25%; 
 
} 
 
.col-4 { 
 
    width: 33, 33333333333333%; 
 
} 
 
.col-5 { 
 
    width: 41, 66666666666667%; 
 
} 
 
.col-6 { 
 
    width: 50%; 
 
} 
 
.col-7 { 
 
    width: 58.33333333333333%; 
 
} 
 
.col-8 { 
 
    width: 66.66666666666666% 
 
} 
 
.col-9 { 
 
    width: 75%; 
 
} 
 
.col-10 { 
 
    width: 83.33333333333333%; 
 
} 
 
.col-11 { 
 
    width: 91.66666666666667%; 
 
} 
 
.col-12 { 
 
    width: 100%; 
 
}

<main> 
 
    <header> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <a href="index.html">Page</a> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <nav> 
 
     <div class="row"> 
 
     <div class="col-1-5"> 
 
      <a href="1.html">1</a> 
 
     </div> 
 
     <div class="col-1-5"> 
 
      <a href="2.html">2</a> 
 
     </div> 
 
     <div class="col-1-5"> 
 
      <a href="3.html">3</a> 
 
     </div> 
 
     <div class="col-1-5"> 
 
      <a href="4.html">4y</a> 
 
     </div> 
 
     <div class="col-1-5"> 
 
      <a href="5.html">5</a> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    <section> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <h2>Lorem</h2> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus nisl nec ultrices porta. Nunc faucibus congue congue. Maecenas ut tellus nisi. Curabitur scelerisque mollis quam at tincidunt. Quisque placerat nisl ac nisl placerat 
 
      tempor. Nam non augue in arcu hendrerit mollis in ut augue. Nunc vehicula ipsum id leo faucibus hendrerit. Donec consequat magna enim, eget volutpat magna viverra sed.</p> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    <aside> 
 
     <div class="row"> 
 
     <div class="col-3"> 
 
      <a href="" target="_blank"> 
 
      <i class="icon-facebook-official"></i> 
 
      </a> 
 
     </div> 
 
     <div class="col-3"> 
 
      <a href="" target="_blank"> 
 
      <i class="icon-linkedin-squared"></i> 
 
      </a> 
 
     </div> 
 
     <div class="col-3"> 
 
      <a href="" target="_blank"> 
 
      <i class="icon-twitter"></i> 
 
      </a> 
 
     </div> 
 
     <div class="col-3"> 
 
      <a href="" target="_blank"> 
 
      <i class="icon-git"></i> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </aside> 
 
    <footer> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <p>&copy; 2016 Page</p> 
 
     </div> 
 
     </div> 
 
    </footer> 
 
    </main>

我设法让我的页脚粘，但我不知道怎么做，与头，导航和一旁。我已经和页脚做同样的事情了，但是它并没有想成为宽度：100％;.我不想为此使用JS或jQuery，我希望它是纯HTML和CSS。

来源

2016-11-15 grhu

我相信你需要在你的CSS中使用固定位置。我创建了这个Codepen让你开始。这是你在追求什么？

position:fixed;

http://codepen.io/ad-kemp/pen/BQLype

来源

2016-11-15 19:43:50

类似的东西，但我想抛开マ将宽度：100％和页脚的顶部，也是固定的。我会尽力将其实现到我的代码并让你知道发生了什么。 – grhu

页眉和页脚固定就像我想要的，但它们忽略了MAIN的固定宽度，并且宽度为100％。最重要的是SECTION内容在它后面。另外，我也想要NAV和ASIDE。 – grhu

嗨，请参阅修改后的codepen - http://codepen.io/ad-kemp/pen/BQLype - 使用媒体查询删除负边距。希望这可以帮助！ –

粘性页脚，标题，导航和与网格asdide

回答

相关问题