wordpress - 如果屏幕大于页面，底部的页脚

Posted 2023-03-21

【中文标题】wordpress - 如果屏幕大于页面，底部的页脚

【英文标题】：wordpress - footer at bottom if screen is bigger than page

【发布时间】：2016-01-18 16:32:26

【问题描述】：

我有一个以 Minamaze 为主题的 wordpress 网站。它有一些大页面和一些小页面。

如果页面小于屏幕，我希望页脚位于屏幕底部（最好是垂直居中正文）。

如果页面大于屏幕，我希望页脚位于页面底部（向下滚动后可见）。

我尝试了很多选项，例如：

footer 
    position: relative;
    margin-top: -144px; /* negative value of footer height */
    height: 144px;
    clear: both;

我看到很多关于“包装器”的信息，但没有一个真正起作用。

网站是http://www.samenherbestemmen.nl，希望有人能帮忙。

注意：我现在知道页脚总是贴在底部，但是当页面大于屏幕时，我更喜欢将页脚放在页面底部。

【参考方案1】：

Codepen http://codepen.io/noobskie/pen/wKpWXO?editors=110

我认为您所指的是所谓的“粘性页脚”

我在您当前的页脚中使用了相同的 html 标记，但我没有使用您的任何 css，因此您可能会遇到一些值得一试的冲突

CSS

* 
  margin: 0;

html, body 
  height: 100%;

.page-wrap 
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 

.page-wrap:after 
  content: "";
  display: block;

.site-footer, .page-wrap:after 
  height: 142px; 

.site-footer 
  background: orange;

* 
  margin: 0;

html,
body 
  height: 100%;

.page-wrap 
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px;

.page-wrap:after 
  content: "";
  display: block;

.site-footer,
.page-wrap:after 
  height: 142px;

.site-footer 
  background: orange;

<div class="page-wrap">

  Content!

</div>

<footer class="site-footer">
  <div id="footer">
    <div id="footer-core" class="option4">
      <div id="footer-col1" class="widget-area one_fourth">
        <aside class="  widget widget_text">
          <div class="textwidget">
            <center><a href="http://www.grosfeldvandervelde.nl" target="_blank"><h3 class="widget-title"><font color="black">Grosfeld van der Velde</font><br><font color="#dbd8c1"> architecten</font>
</h3></a>
            </center>
          </div>
        </aside>
      </div>
      <div id="footer-col2" class="widget-area one_fourth">
        <aside class="  widget widget_text">
          <div class="textwidget">
            <center><a href="http://www.rho.nl" target="_blank"><h3 class="widget-title"><font color="black">Rho </font><br><font color="#dbd8c1">adviseurs voor leefruimte</font>
</h3></a>
            </center>
          </div>
        </aside>
      </div>
      <div id="footer-col3" class="widget-area one_fourth">
        <aside class="  widget widget_text">
          <div class="textwidget">
            <center><a href="http://www.pauwert.nl" target="_blank"><h3 class="widget-title"><font color="black">Van den Pauwert </font><br><font color="#dbd8c1">architecten</font>
</h3></a>
            </center>
          </div>
        </aside>
      </div>
      <div id="footer-col4" class="widget-area last one_fourth">
        <aside class="  widget widget_text">
          <div class="textwidget">
            <center><a href="http://www.verkerk-erfgoed.nl" tagert="_blank"><h3 class="widget-title"><font color="black">Verkerk </font><br><font color="#dbd8c1">erfgoed<font>
</font></font></h3></a>
            </center>
          </div><font color="#dbd8c1"><font>
		</font></font>
        </aside>
      </div>
    </div>
  </div>
  <!-- #footer --><font color="#dbd8c1"><font>		
		<div id="sub-footer">
		<div id="sub-footer-core">	

						<!-- #footer-menu -->

			<div class="copyright">
			Copyright <a href="http://www.bergtop-ict.nl">BergTop ICT</a>
			</div>
			<!-- .copyright -->

		</div>
		</div>
	</font></font>
</footer>

编辑哎呀，我忘了提到你需要将site-footer类添加到父footer

【讨论】：

我在普通网站有粘性，但在移动版中，高度也是固定的，所以我只设置页脚的第一部分。知道如何使它仅适用于普通网站（不适用于移动网站）吗？？