我的一些网页很短。在这些页面中，页脚可能会在窗口中间结束，页脚下面是空格（白色）。这看起来很丑。我希望页脚位于窗口的底部，并且有限的内容体正在被拉伸。如果页面较短，则将HTML页脚保留在窗口的底部

但是，如果网页很长，而且您必须滚动才能看到页脚（或全部页面），则事情应该像平常一样行事。

用CSS做这件事的正确方法是什么？我需要Javascript/jQuery来实现这一点吗？

我只关心IE9 +和现代版本的其他浏览器。页脚的高度也可能因页面而异，所以我不想依赖高度。

来源

2012-11-12 at.

您可以显示你使用什么HTML和CSS帮助自己。 –

为什么您的页脚因页面而异？（但是既然它确实，页面之间页脚的变化有多重要？） – Souta

结帐this site。他有一个很好的教程，如何使用CSS来做到这一点。

我复制了他的CSS，以防马修的网站被取下。

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
}

编辑

由于页脚的高度是从页面到页面不同，你可以得到页脚的高度，然后调整#body填充，底部用JavaScript。这里是一个使用jQuery的例子。

$(function(){ 
    $('#body').css('padding-bottom', $('#footer').height()+'px'); 
});

来源

2012-11-12 18:33:56

看起来它需要我知道我的页脚高度，可能对我的情况非常困难。 –

-2

不，它很容易为您的身高设置一个最小值。

这样： min-height：500px; 那么最小高度是500px。

来源

2012-11-12 18:06:20 TdeLange

虽然我不知道窗口和其他元素的高度。 –

-2

使用最小高度属性，尽管不完全可靠，因为一些旧版本可能不支持它。如果你不介意的话，投入一些JavaScript。

来源

2012-11-12 18:10:45 geekman

这并不能真正解决我的问题。 –

给this一试。

它是Github用来保留页脚底部的样式的副本。这是一个有点哈克，并要求您知道您的页脚的高度（可能不适合你的使用情况工作）

标记

<div class="wrapper"> 
<div class="content"><p>Page Content</p></div> 
<div class="footer-push"></div> 
</div> 

<footer> 
    <p>footer-text</p> 
    <img src="http://placekitten.com/100/100" alt="footer image"> 
</footer>

CSS（嗯，SCSS）

// our page element 

html { 
height:100%; 
} 

body { 
height:100%; 
} 
.wrapper { 
background:gray; 
min-height:100%; 
height: auto !important; // the magic! 
height:100%; 
margin-bottom:-158px; // the height of our footer + margin 
} 

.footer-push { 
clear:both; 
height:158px; // the height of our footer + margin 
} 

footer { 
background:rgba(#a388a3,0.8); 
margin-top:20px; 
height:138px; 
}

这里重要的事情似乎是：

设置高度：在含有元素（尤指html和body）
了解你的页脚的高度，以及使用的min-heightheight: auto !important和height:100%
100％

希望有所帮助！

来源

2012-11-12 18:37:49

HTML

<body> 
    <div class="example"> 
     <p>Lorem ipsum dolor sit amet consectetur...</p> 
    </div> 

    <footer> 
     <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ul> 
    </footer> 
</body>

CSS

body { 
    min-height: 100%; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
}

来源

2015-12-07 22:54:24 georgecodes

如果页面较短，则将HTML页脚保留在窗口的底部

回答

标记

CSS（嗯，SCSS）

相关问题