Question

所以我一直在互联网上寻找解决方案，以使页脚停留在页面的最底部，而不管页面内容的长度如何。我从教程中跟踪了CSS，如果内容不够长，页脚只在页面底部，如果内容更长，页面将获得滚动条，页脚将卡在中间向下滚动页面以获取更多内容。下面是我的CSS和HTML。

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
    position:absolute;
    top:100px;
    left:20%;
    width: 1024px;
    height:1300px;
    background:blue;
  }

 .container {
    position:absolute;
    top:0px;
    left:20%;
    width: 1024px;
    height:86px;
    max-height:300px;
    background:blue;
  }

#footer{
 position:absolute;
 bottom:0px;
 width:100%;
 height:100px;
 max-height:900px;
 left:0px;
 color:#000099;
 background:#f2f2f2;
}


Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
    <html>
    <body>
    <div class="wrapper">

        <div class="container">Container 1</div>
        <div class="country-container">Container 2</div>
        <div id="footer">Footer</div>

    </div>
    </body>

</html>

Answer 1

尝试在Css代码中使用上述内容

<div style="width: 100%;height: auto;border:1px solid red;float:left;">
            <div style="width: 100%;height: auto;border:1px solid green;float:left;">

            </div>
            <div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">

            </div>
        </div>

Answer 2

＆＃13;

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
    position:absolute;
    top:100px;
    left:20%;
    width: 1024px;
    height:1300px;
    background:blue;
  }

 .container {
    position:absolute;
    top:0px;
    left:20%;
    width: 1024px;
    height:86px;
    max-height:300px;
    background:blue;
  }

#footer{
 position:fixed;
 bottom:0px;
 width:100%;
 height:100px;
 max-height:900px;
 left:0px;
 color:#000099;
 background:#f2f2f2;
}

＆＃13;

<div class="wrapper">

        <div class="container">Container 1</div>
        <div class="country-container">Container 2</div>
        <div id="footer">Footer</div>

    </div>

＆＃13;

将#footer更改为

position:fixed;

Answer 3

请尝试此css并查看小提琴链接：

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
  background: #0000ff none repeat scroll 0 0;
  height: 1300px;
  left: 20%;
  position: relative;
  width: 1024px;
}

.container {
  background: #0000ff none repeat scroll 0 0;
  height: 86px;
  left: 20%;
  margin-bottom: 3%;
  max-height: 300px;
  position: relative;
  top: 0;
  width: 1024px;
}

#footer {
  background: #f2f2f2 none repeat scroll 0 0;
  bottom: 0;
  color: #000099;
  height: 100px;
  left: 0;
  max-height: 900px;
  position: absolute;
  width: 100%;
}

https://jsfiddle.net/tn30t1k7/2/

否则你可以提供这个链接：

http://www.cssstickyfooter.com/

Answer 4

<body>
    <section class="wrapper">
        <main class="content">
            content
        </main>

        <footer class="footer">
            footer
        </footer>
    </section>
</body>


html {
   position: relative;
   min-height: 100%;
}

body{
  margin: 0 0 60px 0;
}

/* don't do that */
/*  .wrapper {
  position: relative;
}  */

.content {
  background: green;
  height: 200px;
  /* height: 700px; */
}

footer{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    height: 60px;
    background-color: orange;
}

这个https://jsfiddle.net/zkto8o88/2/怎么样。

.footer类将搜索具有相对位置的最近父级，在本例中为html标记。

如果.wrapper类具有位置相对属性，那么它就不起作用。

如果内容太长，我的页脚就不会停留在底部

4 个答案: