這是我的頁腳代碼，我怎樣才能讓它顯示在頁面的底部，而不是它上面的內容的正下方？
/*footer */
#footer .column {
float: left;
width: 25%;
}
#footer .column div {
margin: 5px;
height: 200px;
background: #eeeeee;
}
<div id="footer">
<div class="column"><div></div></div>
<div class="column"><div></div></div>
<div class="column"><div></div></div>
<div class="column"><div></div></div>
</div>注意:這不必是一個固定的頁腳
實際上有兩個主要選擇:
固定頁腳-頁腳總是在頁面底部可見 推入頁腳-即使內容沒有填滿窗口，頁腳也會被推到頁面底部 兩者中比較容易的是固定頁腳。
固定頁腳 要使頁腳固定，在CSS中將頁腳的位置設置為fixed position:fixed，并將頁腳定位到頁面底部bottom:0px。這是CSS-Tricks的一段代碼。
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}推入頁腳 推送頁腳有點棘手。這里有一個很棒的圖形，展示了當沒有足夠的內容時，頁腳為什么不在頁面底部:
基本上，問題的發生是因為頁腳元素被“推”到了它上面的元素的下面，而那個元素的高度沒有頁面的高度長。為了解決這個問題，你需要確保頁腳被“推”到頁面的整個高度(減去頁腳的高度)。
以下是如何做到這一點:
超文本標記語言
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
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;
}這里有一個關于如何做的更詳細的教程以及上面的代碼源代碼。
這是來自同一來源的代碼的工作演示。
Bootstrap有一個粘在頁面底部的頁腳示例: https://getbootstrap.com/examples/sticky-footer/
下面是CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}然后在HTML中:
<footer class="footer">
</footer>修復了底部的頁腳，效果很酷 在jsfiddle中檢查整頁設計
<body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
<h1>kulbhushan charaya</h1>
</footer>
</body>css是
body {
background: #ffffff none repeat scroll 0 0;
padding:40px 0;
}
header{
position:fixed;
top:0;
z-index:999;
left:0;
width:100%;
background:#fff;
border-bottom:1px solid #ccc;
}
header ul li {
display: inline-block;
list-style: outside none none;
padding: 5px;
}
header ul li a {
color: #000000;
text-decoration: none;
}
footer {
bottom: 0;
left: 0;
position: fixed;
text-align: center;
width: 100%;
z-index: -1;
}
footer h1 {
margin: 0;
}
.wrapper {
background: #ffffff;
padding: 0 15px;
z-index: 1;
}如果任何人再次陷入這種困境，這是一個沒有黑客的現代解決方案
HTML:
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>CSS:
/**
* Demo Styles
*/
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.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: #efefef;
text-align: center;
}我通過簡單地在我的HTML的主容器上使用最小高度解決了這個問題。
所以HTML:
<body>
<div class="top-nav">My Nav Bar</div>
<div class="main-container">
All my content
</div>
<div class="footer">
My footer
</div>
</body>然后是CSS
.top-nav {
height: 4rem;
}
.main-container {
min-height: calc(100vh - 4rem - 4rem);
}
.footer {
height: 4rem;
}有了SCSS，你可以使用變量來跟蹤頂部導航和頁腳的高度，然后做一些像
.main-container {
min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}這不是一個完美的解決方案，因為它不會把你的頁腳準確地放在視窗的底部，但當內容太短時，它會把它推到底部，防止頁腳出現在屏幕的中間。
您可能需要將html元素高度設置為100%，否則您的頁面本身將只是內容的必要高度。我自己碰到的。
我猜你的意思是你希望頁腳留在頁面的底部，即使頁面上沒有足夠的內容來填充視窗的高度？
如果是這種情況，你可以使用這個技巧:CSS粘性頁腳-http://ryanfait.com/sticky-footer/, http://www.cssstickyfooter.com/或http://css-tricks.com/snippets/css/sticky-footer/
粘滯頁腳技巧通常依賴于在包裝div上聲明最小高度。這意味著您必須重新格式化您的HTML代碼，如下所示:
<div id="wrap">
<div id="content">
/* Main body content */
</div>
</div>
<div id="footer">
/* Footer content here */
</div>對于CSS:
html, body, #wrap {
height: 100%;
}
#wrap {
height: auto;
min-height: 100%;
}
#content {
overflow: hidden;
padding-bottom: (footer height);
}
#footer {
position: relative;
margin-top: -(footer height); /* Note the negative value */
height: (footer height);
clear:both;
}如果你的頁腳可能有可變的高度，你必須用JavaScript設置#content的底部填充和#footer的上邊距。該值取決于#footer元素本身的計算高度。
材質設計Bootstrap有一個很棒的類:固定底。這是我用的。
您需要在頁腳自動設置其底部位置后設置父級的高度。
如果出現此問題后，您無法在父div或頁腳部分添加內容或高度。
只需使用flex-box:將主體顯示設置為flex，然后將頁腳與flex end對齊。這樣，頁腳將始終是最后一個組件。
body {
display: flex;
flex-direction: column;
}
footer {
align-self: flex-end;
}