Question

问题代码https://jsfiddle.net/ftbpmw7c/ 它在网格后上升，我该如何解决？我想使页脚固定 html代码



    <footer>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>

         </footer>
    css code:   
  footer{

    width: 100%;
    height: 150px;
      background: black;
      display:grid;
      grid-template-columns: repeat(5, auto);
      clear: both;

  }
  li {
      float: left;
  }
  footer li a{
      display: block;
      line-height: 1.5;
  }

Answer 1

只需执行以下步骤即可获得所需的结果。

<header>将在nav后关闭
移动iframe下方的评论框
使用间距，宽度，高度和网格进行正确对齐。

找到小提琴here。

var disqus_config = function() {
    this.page.url = 'http://example.com/2017/08/02/postid=998'; // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = '/2017/08/02/postid=998'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

(function() { // DON'T EDIT BELOW THIS LINE
    var d = document,
        s = d.createElement('script');
    s.src = 'https://coinspy.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

* {
    box-sizing: border-box;
    position: relative;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #161616;
    box-sizing: border-box;
    width: 100%;
}

nav {
    background: white;
    height: 100px;
    width: 100%;
}

nav ul {
    padding: 30px 0 0;
}

ul {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 1
}

ul li {
    float: left;
}

ul li a {
    font-style: 1.5em;
    display: block;
    padding: 1px 20px;
}

nav > img {
    width: 80px;
    position: absolute;
    right: 10px;
    top: 8px;
}

.section1 {
    margin-top: 10px;
    width: 100%;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 3px;
    grid-column-gap: auto;
    justify-content: center;
    justify-items: center;
}

.iframe1 {
    border: 1px solid black;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0px;
    margin-bottom: 1px;
    max-width: 640px;
}

.container1 {
    display: grid;
    grid-template-columns: repeat(2, auto);
    height: 300px;
    width: 100%;
}

.box1 {
    width: 300px;
    height: 300px;
    background: red;
    padding: 50px 15px;
    box-sizing: border-box;
}

.box2 {
    width: 300px;
    height: 300px;
    background: red;
}

.box3 {
    width: 300px;
    height: 300px;
    background: red;
}

.side1 {
    width: 180px;
    float: left;
    position: sticky;
    top: 0;
}

.side2 {
    width: 180px;
    float: right;
    position: sticky;
    top: 0;
    background-color: blue;
}

footer {
    width: 100%;
    height: 150px;
    background: black;
    display: grid;
    grid-template-columns: repeat(5, auto);
    clear: both;
    text-align: center;
}

footer li {
    float: left;
}

footer li a {
    display: block;
    line-height: 1.5;
}

.section2 {
    max-width: 640px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.disqus_thread {
    width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <nav>
        <img src="https://brandmark.io/logo-rank/random/pepsi.png" alt="logo">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Menu</a></li>
            <li><a href="">Menu</a></li>
        </ul>
    </nav>
</header>
<section class="section1">
    <div class="box box1">
        <iframe width="250px" height="200px" src="https://www.youtube.com/embed/cKGPrOLIt7M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="box box2"></div>
    <div class="box box3"></div>

</section>
<hr>
<div class="iframe1">
    <iframe SRC="https://www.mp4upload.com/embed-nbyvbffoyerp.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=640 HEIGHT=250 allowfullscreen></iframe>
</div>
<section class="section2">
    <div id="disqus_thread"></div>

    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

</section>
<div class="container1">
    <img class="side1" src="https://via.placeholder.com/1536x2408" alt="">

    <img class="side2" src="https://via.placeholder.com/1536x2408" alt="">
</div>

<footer>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>
    <li><a href="">Menu</a></li>

</footer>

如何修复页脚？

1 个答案: