保护页面底部的页脚

虽然我网站上的大多数页面都有足够的内容,以便为大多数人推到页面底部的页脚。 我想知道从现在开始,无论屏幕的大小如何,它都是如下所示。

我尝试了几种方式,如底部:
0x;


position:absolute:

等等。似乎从来没有很好地工作,有时会把页脚从容器推动到楼下,在这里使用这些例子中的一些例子。

套件包括 HTML 和 CSS 对于页脚的两部分 /footer & copyright bar/. 无论如何,他们都在里面
<section id="footer">


div

.

我删除了我的尝试让他坚持现在看着他,看看你需要改变当前代码的东西。

Live URL -
http://www.mangdevelopment.co.uk/nakedradish
/这是一家餐馆网站。 不要担心这个词 'naked'/.

HTML


<section id="footer">
<div class="container">
<div class="row">
<div class="span1">
<div id="small-logo">
<img src="img/small-logo.png"/>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR BOXES</h6>
<ul>
<a href="#">
<li>Classic Box</li>
</a>
<a href="#">
<li>Vegetarian Box</li>
</a>
<a href="#">
<li>Family Box</li>
</a>
<a href="#">
<li>Dinner Party Box</li>
</a>
<a href="#">
<li>Gift Box</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>OUR RECIPES</h6>
<ul>
<a href="#">
<li>Last Weeks Feature</li>
</a>
<a href="#">
<li>Next Weeks Feature</li>
</a>
</ul>
</div>
</div>
<div class="span2">
<div class="footer-list">
<h6>ABOUT US</h6>
<ul>
<a href="#">
<li>The Food</li>
</a>
<a href="#">
<li>How We Sourcex</li>
</a>
<a href="#">
<li>Sustainability</li>
</a>
<li><a href="about.html">About Us</a></li>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</div>
</div>
<div class="span5">
<div id="twitter">
<img alt="" class="twitter-logo" height="50" src="img/twitter-logo.png" title="" width="50"/>
<div class="tweet-bg">
<div class="tweets">
<p>@chefallanp that's just not on really</p>
</div>
<div id="follow-btn">
<img src="img/follow-us.jpg"/>
</div>
</div>
</div>
<div class="checkout-options">
<h6>SECURE CHECKOUT</h6>
<ul>
<li><img src="img/solo-logo.png"/></li>
<li><img src="img/switch-logo.png"/></li>
<li><img src="img/maestro-logo.png"/></li>
<li><img src="img/visa-logo.png"/></li>
<a href="#">
<li><img src="img/facebook-logo.png"/></li>
</a>
<a href="#">
<li><img src="img/twitter-logo-flat.png"/></li>
</a>
</ul>
</div>
</div>
</div>
</div>
<div id="copyright-bar">
<div class="container">
<div class="row">
<div class="copyright-content">
<div class="span4">
<p>The Naked Radish Limited. 2013 All rights reserved.</p>
</div>
<div class="span4 offset4">
<div class="copyright-list">
<ul>
<a href="terms.html">
<li>Terms &amp; Conditions</li>
</a>
<a href="privacy.html">
<li> - Privacy Policy</li>
</a>
<a href="#">
<li> - Cookie Policy</li>
</a>
</ul>
</div>
</div>
</div>
</div>
</div>
</div></section>


CSS:


#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
}


</section>
已邀请:

郭文康

赞同来自:

为您
footer

:


#footer {
position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
}


为您
body

:


body {
margin-bottom:50px;
}



#footer {
background-color: red;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 50px;
margin-bottom: 0px;
}

div {
margin: 20px 20px;
}

body {
margin-bottom: 50px;
}



<div>
Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom:
0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer /footer &amp; copyright
bar/. They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the
bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally
pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer /footer &amp; copyright bar/. They're both inside of a div anyway. I removed my attempts
at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always
fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using
some of those examples right there. Included is the HTML and CSS for the two parts of the footer /footer &amp; copyright bar/. They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and
see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway.
I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for
the two parts of the footer /footer &amp; copyright bar/. They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site
have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc.
Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer /footer &amp; copyright bar/. They're both inside
of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most
people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's
container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer /footer &amp; copyright bar/. They're both inside of a div anyway. I removed my attempts at getting it to stick so people
can have a look at it right now and see what the current code is to amend.
</div>
<div id="footer">
This is footer
</div>



http://jsfiddle.net/girishgowdayt/RUDWS/
-版本

快网

赞同来自:

我们可以用

FlexBox

对于粘性的尼兹尼亚

页脚



标题

没有使用 POSITIONS 在 CSS.


.container {
display: flex;
flex-direction: column;
height: 100vh;
}

header {
height: 50px;
flex-shrink: 0;
background-color: #037cf5;
}

footer {
height: 50px;
flex-shrink: 0;
background-color: #134c7d;
}

main {
flex: 1 0 auto;
}



<div class="container">
<header>HEADER</header>
<main class="content">
</main>
<footer>FOOTER</footer>
</div>



DEMO - JSFiddle

笔记

: 检查浏览器支持 FlexBox.
https://caniuse.com/#feat=flexbox

风见雨下

赞同来自:

例如,添加
position:fixed;


bottom:0;

在选择器下
#footer

:

http://jsfiddle.net/vHNyb/
CSS


#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
position:fixed;
bottom:0;
width:100%;
}

冰洋

赞同来自:




html, body {
height: 100%;
}


在最低页脚之前包装所有内容 div.


.wrapper {
height:auto !important;
min-height:100%;
}


您可以根据您想要在浏览器窗口底部显示的页脚的哪个部分定制最小高度。 如果安装它 90%, 10% 页脚头,它将在滚动之前显示。

裸奔

赞同来自:

这是一个简单的解决方案 CSS, 哪个工作:


#fix-footer{
position: fixed;
left: 0px;
bottom: 0px;
height: 35px;
width: 100%;
background: #1abc9c;
}

君笑尘

赞同来自:

CSS


html {
height:100%;
}
body {
min-height:100%; position:relative;
}
.footer {
background-color: rgb/200,200,200/;
height: 115px;
position:absolute; bottom:0px;
}
.footer-ghost { height:115px; }


HTML


<div class="header">...</div>
<div class="content">...</div>
<div class="footer"></div>
<div class="footer-ghost"></div>

快网

赞同来自:

我找到了一个解决方案 sticky footer 鉴于导航器的高度和底部页脚的高度取决于设备,令人敏感的位点有点痛苦。 如果您只小心在现代浏览器中工作,您可以使用一点达到目标 Javascript.

如果这是你的 HTML:


<div class="nav">
</div>
<div class="wrapper">
</div>
<div class="footer">
</div>


然后用它 JQuery 在每个页面上:


$/function//{

/* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */
function setWrapperMinHeight// {
$/'.wrapper'/.css/'minHeight', window.innerHeight - $/'.nav'/.height// - $/'.footer'/.height///;
}
/* Make sure the main div gets resized on ready */
setWrapperMinHeight//;

/* Make sure the wrapper div gets resized whenever the screen gets resized */
window.onresize = function// {
setWrapperMinHeight//;
}
}/;

风见雨下

赞同来自:

如果您以这种方式不时尚,您的焦点元素本质上是固定的。

因此,如果您有一个页面,其中内容不足以将其推到结束,它将在观看窗口中间的某个位置; 它看起来非常尴尬,并不知道如何处理它,就像我在高中的第一天一样。

通过宣布规则定位元素
fixed

很棒,如果您总是希望您的页脚无论页面的起始头如何都能看到,但是忘记安装底部字段,以便在此页面上的内容的最后一位上不施加它。 如果您的页脚具有动态高度,则变得困难; 自适应网站通常发生的事情,因为它是堆叠元素的性质。

您会在定位找到类似的问题。
absolute

. 虽然它真的显示了文档的自然流程中有问题的元素,但如果您发现有一个页面,它仍然不会将其固定在屏幕的底部,几乎没有内容来指定它。

想想实现这一目标

:

宣布标签的高度值
<body>

&amp;
<html>


交易宣言
minimum-height

投资元素 - shell,通常是包裹身体结构中所含子公司的元素 /它不包括您的物品。
footer

/

http://codepen.io/anon/pen/wWwqqB


$/"#addBodyContent"/.on/"click", function// {
$/"<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>"/.appendTo/".flex-col:first-of-type"/;
}/;

$/"#resetBodyContent"/.on/"click", function// {
$/".flex-col p"/.remove//;
}/;

$/"#addFooterContent"/.on/"click", function// {
$/"<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>"/.appendTo/"footer"/;
}/;

$/"#resetFooterContent"/.on/"click", function// {
$/"footer p"/.remove//;
}/;



html, body {
height: 91%;
}

.wrapper {
width: 100%;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px;
display: block;
min-height: 100%;
}

footer {
background: black;
text-align: center;
color: white;
box-sizing: border-box;
padding: 10px;
}

.flex {
display: flex;
height: 100%;
}

.flex-col {
flex: 1 1;
background: #ccc;
margin: 0px 10px;
box-sizing: border-box;
padding: 20px;
}

.flex-btn-wrapper {
display: flex;
justify-content: center;
flex-direction: row;
}

.btn {
box-sizing: border-box;
padding: 10px;
transition: .7s;
margin: 10px 10px;
min-width: 200px;
}

.btn:hover {
background: transparent;
cursor: pointer;
}

.dark {
background: black;
color: white;
border: 3px solid black;
}

.light {
background: white;
border: 3px solid white;
}

.light:hover {
color: white;
}

.dark:hover {
color: black;
}



<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]
<div class="wrapper">
<div class="flex-btn-wrapper">
<button class="dark btn" id="addBodyContent">Add Content</button>
<button class="dark btn" id="resetBodyContent">Reset Content</button>
</div>
<div class="flex">
<div class="flex-col">
lorem ipsum dolor...
</div>
<div class="flex-col">
lorem ipsum dolor...
</div>
</div>
</div>
<footer>
<div class="flex-btn-wrapper">
<button class="light btn" id="addFooterContent">Add Content</button>
<button class="light btn" id="resetFooterContent">Reset Content</button>
</div>
lorem ipsum dolor...
</footer>


</html></body>

裸奔

赞同来自:

页脚应位于页面底部,但不是

使固定

.

CSS


html {
height: 100%;
}

body {
position: relative;
margin: 0;
min-height: 100%;
padding: 0;
}
#header {
background: #595959;
height: 90px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
background-color: #595959;
}


HTML


<html>
<head></head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>

三叔

赞同来自:

一个非常简单的示例,显示了如何在应用程序布局的底部修复页脚。


/* Styles go here */
html{ height: 100%;}
body{ min-height: 100%; background: #fff;}
.page-layout{ border: none; width: 100%; height: 100vh; }
.page-layout td{ vertical-align: top; }
.page-layout .header{ background: #aaa; }
.page-layout .main-content{ height: 100%; background: #f1f1f1; text-align: center; padding-top: 50px; }
.page-layout .main-content .container{ text-align: center; padding-top: 50px; }
.page-layout .footer{ background: #333; color: #fff; }



html
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.0.5" href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<table class="page-layout">
<tr>
<td class="header">
<div>
This is the site header.
</div>
</td>
</tr>
<tr>
<td class="main-content">
<div>
<h1>Fix footer always to the bottom</h1>
<div>
This is how you can simply fix the footer to the bottom.
</div>
<div>
The footer will always stick to the bottom until the main-content doesn't grow till footer.
</div>
<div>
Even if the content grows, the footer will start to move down naturally as like the normal behavior of page.
</div>
</div>
</td>
</tr>
<tr>
<td class="footer">
<div>
This is the site footer.
</div>
</td>
</tr>
</table>
</body>
</html>

君笑尘

赞同来自:

您可以使用

模拟滤网

. 他比 Flexbox, 浏览器中的支持较少。

核实:

HTML


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


CSS


html {
height: 100%;
}

body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}

.footer {
grid-row-start: 2;
grid-row-end: 3;
}


有用的链接

:

浏览器支持:
https://caniuse.com/#feat=css-grid
完整指南:
https://css-tricks.com/snippet ... grid/

冰洋

赞同来自:

我的决定:


html, body {
min-height: 100%
}

body {
padding-bottom: 88px;
}

footer {
position: absolute;
bottom: 0;
width: 100%;
height: 88px;
}

八刀丁二

赞同来自:

使用 Flex 和 Bootstrap4 /如果你不使用 Bootstrap4, 您可以使用属性达到相同的结果。 flex/


<body class="d-flex flex-column">
<div>Header</div>
<div>Main container</div>
<div class="mt-auto">Footer</div>
</body>

要回复问题请先登录注册