在移動視圖和桌面視圖中，使頁腳都停留在頁面底部
[英]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.