如何将页脚固定在底部？

我在我的项目中使用页脚。我正在使用c＃.net mvc。如何将页脚固定在底部？

我插入页脚。但我有问题。

当Body含量低意味着页脚上升。即低于身体内容。如果主体包含较少的内容，我希望脚注固定在页面的底部。

我该如何实现它？

.footer { 
 
    background: none repeat scroll 0 0 white; 
 
    border-top: 1px solid #e7eaec; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 10px 20px; 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class="footer"> 
 
    Bottom Page 
 
</div>

来源

2017-06-20 Nivitha G

的[正确地作出躯坚守页面底部]可能的复制（https://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-页面正确） – vassiliskrikonis

https://css-tricks.com/snippets/css/sticky-footer/ – athi

您可以使用新的属性和值从CSS3。

例如：

<body> 
    <div class="container"></div> 
    <div class="footer"></div> 
</body>

对于CSS：

.container { 
    min-height: 90vh; 
} 

.footer { 
    height: 10vh; 
}

这样一来，你的页脚将永远在底部，即使你的容器是空

来源

2017-06-20 06:59:06 trichetriche

这会使页脚的高度动态化，可能不会成为你想要的，也可能会降低页脚的页脚内容的高度.... –

这仍然是一个解决方案，他没有指定这些点。关于页脚的内容，你可以适应它。您还有媒体查询来处理特定情况。 – trichetriche

@Nivitha g ^请找到下面的代码。我希望你期待同样的结果。

footer { 
 
    background: #2db34a; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 20px 0; 
 
    position: fixed; 
 
    right: 0; 
 
    text-align: center; 
 
}

<footer>Fixed Footer</footer>

来源

2017-06-20 07:02:17 sanjay

这并没有多大用处。它显示*在任何内容的顶部*。 –

@ freedomn-m同意你的意见。你能告诉我怎样才能以更好的方式做到这一点？ – sanjay

在SO –

可以使用site-footer类来创建一个棘手的注脚：

<div class="page-wrap"> 
    Content!  
</div> 
<footer class="site-footer"> 
    I'm the Sticky Footer. 
</footer>

来源

2017-06-20 07:06:34 kavita

如果你whant你的页脚滚动倍以下为好，但永远不会高过

窗口底部你可以做这样的事情：

<div id="content"></div> 
<footer></footer>

然后

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

footer{ 
    background: #ccc; 
    height:30px; 
    position: absolute; 
    bottom:0; 
    width:100% 
} 

#content{ 
    padding-bottom:30px; 
}

https://jsfiddle.net/ay6jx9yp/

来源

2017-06-20 07:11:02

Will you please try by making this. 

html, body { 
    height: 100%; 
}

这里是answered link类似于您的问题之一：

来源

2017-06-20 07:13:01

你需要从页脚的position: absolute;使position: fixed;，使之固定.. ！请参阅下面的代码片段！

.footer { 
 
    background: blue; 
 
    border-top: 1px solid #e7eaec; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    padding: 10px 20px; 
 
    position: fixed; 
 
    text-align: center; 
 
    color: #fff; 
 
}

<body> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <br /><br /><br /><br /><br /> 
 
    <div class="footer"> 
 
    Bottom Page 
 
    </div> 
 
</body>

来源

2017-06-20 07:30:54

如何将页脚固定在底部？

回答

相关问题