Question

我想要完成的是将所有页面的页脚放在正文内容之下。所有页面都有不同大小的正文内容。对我来说，具有挑战性的一点是只为所有页面保留一个CSS。

我尽力在这里展示css和HTML，但没有运气。相反，这是我的代码的JSFiddle：https://jsfiddle.net/zsrsd20m/

 .container {
min-height:80%;
position:relative;
}

.titleText{
width:100%;
padding-top: 35px;
padding-bottom: 35px;
background-color: #127577;

color: white;
text-align: center;
}

.navBar{
 padding-right: 20px;
 float:left;
 }

.mainText{
 height:100%;
 padding-left:220px;
 padding-right:250px;
 padding-bottom:0px;
 font-size: 20px;
 text-align: justify;
}

.footerText{  
 width:100%;
 padding-top: 35px;
 padding-top: 23px;
 background-color: #127577;
 color: white;
 text-align: center;
}

.Container和用HTML制作的所有其他Div都是因为：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

我想要它，即使身体内容太小，页脚总是停留在页面的底部。如果身体内容很大，同样适用。目前，当将主体内容的高度设置为100％时，即使内容很小并且不需要滚动条，它也会向我显示滚动条。当移除高度时，它会使页脚直接位于较小的主体内容之下，这是一半好但不在页面的底部，所以它看起来很糟糕。

问题截图： https://imgur.com/a/x16RC

Answer 1

哇 - 这个链接已经老了。我们现在有了一些更好的技术，即flexbox。

＆＃13;

/* The magic: */
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FDD; }
main { background-color: #DFD; }
footer { background-color: #DDF; }

＆＃13;

<body class="Site">
  <header>Header</header>
  <main class="Site-content">Content</main>
  <footer>Footer</footer>
</body>

＆＃13;

您可以阅读所有相关内容right here

Answer 2

使用粘性页脚CSS https://css-tricks.com/couple-takes-sticky-footer/

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

Answer 3

您可以为内容指定 100vh 或 100vh 减去页脚高度的 min-height。这适用于响应式设计，因为无需为页脚设置固定高度。

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body{
                margin: 0;
                padding: 0;
            }
            #content{
                min-height:90vh;
                background-color:yellow;
            }
            #footer{
                background-color:blue;
                min-height:10vh;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <!--everything goes here-->
        </div>
        <div id="footer"></div>
    </body>
</html>

Answer 4

试试这个。

select a.userid
from table1 a 
left join table2 b on a.filter = b.filter1 
left join table2 b1 on a.filter = b1.filter2
group by a.userid
having sum(b.headline = 'test')
and sum(b1.headline = 'test')

参考：https://bootsnipp.com/snippets/featured/easy-sticky-footer

如何在页面底部保持页脚的正文内容

4 个答案: