将页脚保持在底部（css）

时间：2016-09-30 03:35:08

标签： html css

这似乎是一个受欢迎的问题，但即使在纳入一些建议后，我也无法获得理想的结果。

我有一个页脚，我希望它位于页面底部。这是我的HTML和CSS： （hi＆＃39;只是占位符内容）

HTML：

<body>
<ul>
  <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>

</ul>

<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>

</body>

CSS：

.footer {
bottom:0;
 position: absolute;
 width:100%;  

}

body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;

}

现在，如果position: absolute;样式中有.footer，则页脚在页面加载时位于底部，并在向下滚动时保持相同的位置。它也与内容重叠，从小提琴here

可以看出

如果我删除position: absolute属性，则页脚不在页面底部，而是直接位于上一个元素的下方。请参阅此处以了解我的意思LINK

我希望它位于页面底部。如果有关于年龄的最小内容，那么它应该一直到底，如果在页脚之前有很多内容，那么它不应该重叠它们并且低于所有内容。 jQuery解决方案也很好。

7 个答案:

答案 0 :(得分：0)

按如下方式更新你的css

检查jsbin Link to Jsbin

中的输出 
.footer {
    position:relative;
    top:225px;



}

＆＃13;
＆＃13; 
.footer {
	position:relative;
	top:225px;

  

}

body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;

}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
<ul>
  <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>

</ul>

<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我有更新代码检查这个，

CSS 

.footer {
    bottom:0;
    position: fixed;
    width:100%;  
    margin-bottom: 0 !important;
}
.content {
    position: relative;
}
body {

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height:100%;
    min-height: 100%;
}

HTML 

<div class="content">
<ul>
  <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
  <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>

</ul>
<div>
<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>
</div>

bootply

答案 2 :(得分：0)

查看Chris Bracco撰写的this精彩CodePen，它将解决您的问题。

/**
 * 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;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>

答案 3 :(得分：0)

你应该使用位置＆＃34;固定＆＃34;，但你需要给你的身体标签一个填充底部。导航栏还需要保证金为零。

.ts

Bootply：http://www.bootply.com/e1EQiagcBd

答案 4 :(得分：0)

我喜欢你的问题，我得到了一个解决方案，请复制粘贴到你的HTML，它对我有用

/* css */


* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
html, body {
	height:100%;
	width:100%;
	float:left;
}
body {
	margin:0;
	position:relative;
}
header {
	float:left;
	width:100%;
	padding:40px;
	background:#666;
}
.letter_s {
	position:relative;
	float:left;
	width:100%;
	min-height: calc(100% - 160px);
}
footer {
	float:left;
	width:100%;
	padding:40px;
	background:#666;
}
<!-- HTML -->

<header></header><!-- /header -->

<div class="letter_s">
	<p>he soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soule soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution th is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution</p>
	    
</div><!-- /.letter_s -->

<footer></footer><!-- /footer-->

输入更多字母或添加一些可以看到发生的事情

答案 5 :(得分：0)

尝试将position: relative;提供给html标记。

答案 6 :(得分：0)

您可以在页脚和其上方的所有内容之间放置一个灵活的间隔元素。这个间隔元件可以根据需要进行扩展和收缩，以使页脚保持在页面底部。

以下是带有spacer div的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<ul>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
   <li> Hi </li>
</ul>

<div class="spacer"></div>

<div class="navbar navbar-default footer">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#"> Blog </a></li>
      <li> <a href="#"> Terms of use </a></li>
      <li><a href="#"> Contact us </a></li>
    </ul>
    <a href="#" class="navbar-btn btn-info btn pull-right">
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a>
  </div>
</div>

</body>
</html>

这是CSS：

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.spacer{
  flex:1;
}

我已经在Chrome浏览器中测试了这段代码，它运行完美无瑕。

您可以在MDN上阅读有关灵活盒子的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

添加HTML元素作为间隔符可能不是建议网页样式的做法。但是像这样的灵活间隔器通常用于Android和iOS布局。这种垫片对于创建适用于许多不同屏幕尺寸的稳定布局非常有用。

相关问题
最新问题