在移动视图和桌面视图中，使页脚都停留在页面底部
[英]Making a footer stay at the bottom of the page both in mobile view and desktop view
问题描述
在移动视图中，页脚未保留在页面底部。 它停留在底部上方的某个位置。 我希望页脚在移动视图和桌面视图中始终保持在底部。 但是页脚并不总是可见的，如果站点中的内容很多，则用户必须向下滚动才能看到页脚。 我需要在css文件中进行哪些更改以使页脚始终位于页面底部？
html { height: 100%; } body { font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; color:#303036; margin:0px; background:url('../images/diagonal_noise.png'); background-repeat:repeat; min-width:1100px; overflow:auto; height:100%; } #mainPart{ margin:0 auto; } .container{ overflow:hidden; clear:both; max-width:1080px; margin:20px auto 40px auto; } footer { color: white; width:100%; padding:0; display:block; clear:both; height: 40px; /* added */ } .footrow{ overflow:hidden; background-color: #111; display:block; } .footrow2{ overflow:hidden; background-color: #002c42; display:block; padding:15px; } .foot{ max-width:1080px; margin:0 auto; font-size:11px; line-height:18px; } .foot-p{ font-weight: 600; padding:2px; color:#66e355 !important; } .half-width { width: 50%; float:left; } .quarter-width { width: calc(25% - 30px); float:left; padding:15px; } #social2 { display: block; background-color: transparent; float: left; margin: 0 auto; } .sc-icn2 { width: 50px; height: 50px; display: block; margin-right: 5px; margin-bottom: 5px; float: left; }
<html> <head> </head> <body> <div id="mainPart"> </div> <div class="container"> </div> <footer> <div class="footrow" > <div class="foot"> <div class="quarter-width"> <div> </div> </div> <div class="quarter-width"> </div> <div class="quarter-width"> <div id="social2"> </div> </div> <div class="quarter-width"> </div> </div> </div> <div class="footrow2" > <div class="foot"> <div class="half-width"> </div> <div class="half-width"> </div> </div> </div> </footer> </body> </html>
4 个解决方案
解决方案1
1 2018-08-04 06:38:18
要获得该结果，请将页脚位置定义为底部。 position: absolute; bottom: 0;
position属性指定用于元素的定位方法的类型。 absolute元素是相对于其第一个祖先元素（即body进行定位的。正如您在body css规则中所看到的，该元素relative于其正常位置进行了定位。
有关position属性的更多信息，请参见此处 。
html { position: relative; min-height: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; } *, *:before, *:after { box-sizing: inherit; } body { overflow-x: hidden; margin: 0px; position: relative; min-height: 100%; height: auto; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } .demo h1 { margin-top: 0; } /** * Footer Styles */ .footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #34495e; color:#fff; text-align: center; }
<div class="demo"> <h1>Footer Stays Bottom</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p> </div> <div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
解决方案2
0 2018-08-04 06:40:13
为了使页脚停留在页面底部，您只需要添加position: absolute; 和bottom: 0; 在适用于页脚的CSS块中。 因此它将变为：
footer{
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
position: absolute;
bottom: 0;
}
解决方案3
0 2018-08-04 06:56:34
这为您工作。 试试吧。
为此，请在.container div旁边添加足够的内容。 并将min-height值添加到.container，如下所示。
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
/*new style*/
min-height:768px;
}
@media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
html { height: 100%; } body { font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; color:#303036; margin:0px; background:url('../images/diagonal_noise.png'); background-repeat:repeat; min-width:100%; overflow:auto; height:100%; } #mainPart{ margin:0 auto; } .container{ overflow:hidden; clear:both; max-width:1080px; margin:20px auto 40px auto; min-height:768px; } footer { color: white; width:100%; padding:0; display:block; clear:both; height: 40px; /* added */ } .footrow{ overflow:hidden; background-color: #111; display:block; } .footrow2{ overflow:hidden; background-color: #002c42; display:block; padding:15px; } .foot{ max-width:1080px; margin:0 auto; font-size:11px; line-height:18px; } .foot-p{ font-weight: 600; padding:2px; color:#66e355 !important; } .half-width { width: 50%; float:left; } .quarter-width { width: calc(25% - 30px); float:left; padding:15px; } #social2 { display: block; background-color: transparent; float: left; margin: 0 auto; } .sc-icn2 { width: 50px; height: 50px; display: block; margin-right: 5px; margin-bottom: 5px; float: left; } @media only screen and (max-width: 768px) { .container{ max-width: 80%; margin:20px auto 40px auto; min-height:480px; } }
<html> <head> </head> <body> <div id="mainPart"></div> <div class="container"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <footer> <div class="footrow" > <div class="foot"> <div class="quarter-width"> <div> </div> </div> <div class="quarter-width"> </div> <div class="quarter-width"> <div id="social2"> </div> </div> <div class="quarter-width"> </div> </div> </div> <div class="footrow2"> <div class="foot"> <div class="half-width"> </div> <div class="half-width"> </div> </div> </div> </footer> </body> </html>
解决方案4
0 2018-08-04 06:57:49
您可以通过多种方式执行此操作：
包装纸的底边利润为负
有一个包装元素，可容纳除页脚以外的所有内容。 它的负边距等于页脚的高度。
* { box-sizing: border-box; } html, body { height: 100%; margin: 0; } .content { padding: 20px; min-height: 100%; margin: 0 auto -50px; } .footer, .push { height: 50px; } footer { background: #42A5F5; color: white; line-height: 50px; padding: 0 20px; }
<div class="content"> <h1>Sticky Footer with Negative Margin 1</h1> </div> <footer class="footer"> Footer </footer>
页脚负上边距
该技术不需要push元素，而是需要在内容周围附加一个环绕元素，以在其中应用匹配的底部填充。 再次防止负页边距将页脚抬高到任何内容之上。
html, body { height: 100%; margin: 0; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; background: red; }
<div class="content"> <div class="content-inside"> content </div> </div> <footer class="footer"></footer>
有calc（）减少高度的包装器
* { box-sizing: border-box; } body { margin: 0; } .content { min-height: calc(100vh - 70px); padding: 40px 40px 0 40px; } .footer { height: 50px; background: #42A5F5; color: white; line-height: 50px; padding: 0 20px; }
<div class="content"> <h1>Sticky Footer with calc()</h1> </div> <footer class="footer"> Footer </footer>
您也可以使用flexbox
html { height: 100%; } body { display: flex; flex-direction: column; height: 100vh; } .content { flex: 1 0 auto; padding: 20px; } .footer { flex-shrink: 0; padding: 20px; background: #42A5F5; color: white; }
<div class="content"> <h1>Sticky Footer with Flexbox</h1> </div> <footer class="footer"> Footer </footer>
在移动视图中将页脚保持在页面底部
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.