Question

我正在为我的新脚本设计一个基本模板，但我无法让页脚位于底部。

我试过

position: relative;bottom: 15px;

但它的页脚中间没有工作，请帮我解决这个问题。您可以编辑我的模板或查看来源here。

Answer 1

如果您希望页脚保持在底部，即使页面需要滚动，也可以使用

postion: fixed;
bottom: 0px;
left: 0px;

这会使它粘在左下角。

编辑：如果你希望它略微偏离底部，只需改变＆＃39;底部＆＃39;的值。到适当的px或百分比。

编辑（再次）：为避免与内容重叠，您可以沿着这些方向做点什么。

HTML：

<div id='Content'></div>
<div id='Footer'></div>

CSS：

#Content
{
    position: relative;
    height: calc( 100% - 100px );
    height: -webkit-calc( 100% - 100px );
    height: -moz-calc( 100% - 100px );
    overflow-y: scroll;
}

#Footer
{
    position:fixed;
    height: 100px;
    bottom: 0px;
    left: 0px;
}

Answer 2

您可以选择在position:relative;中替换position: absolute; bottom: 0; 它将页脚推到屏幕底部

或标准解决方案的 HTML

<div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>

<强> CSS

* { margin:0; padding:0; } html, body, #wrap { height: 100%; } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 150px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

Answer 3

这是因为您的页脚位于内容的底部。你需要

html {
    height: 100%;
}

你可能还需要在body元素上有类似的东西。如果您希望它显示在页面底部而不是通常位于15px以上，则需要使用position: absolute; bottom: 0。

Answer 4

我已在我的页面中证明并且工作正常

在你的css中放上上面的代码

#footer {
    clear: both;
    padding: 6px 10px;
    text-align: right;

    position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

在您的页面中，您只能调用页脚样式

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

你就是！你有你的页脚...我希望我帮助你

Answer 5

Warp Up div

中的内容

<强> HTML：

<body>
    <div class="page-wrap">

    Content..

    </div>

    <footer>
        Footer Content..
    </footer>

</body>

<强> CSS：

* {
  margin: 0;
}
body,html{
    height: 100%;
}
.page-wrap{
    min-height: 90%;/* Adjust This Value According to your Footer .*/
}

Answer 6

我在CSS-Tricks

中使用了一个很棒的粘性页脚

我已经开始为你量身定做了。

Jsbin link

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
</head>
<body>
    <div style="position: relative;text-align: right;right: 50px; top: 15px;">
        <a class="pure-button pure-button-primary" href="?help">Help</a>
    </div>
    <div class="header">
        <h1>Template</h1>
        <h2>basic page.</h2>
    </div>

    <div class="content">

    <h2 class="content-subhead">Enter Link</h2>

    <form class="pure-form pure-form-aligned" action="index.php" method="post">
    <fieldset>
        <legend>To bo bla bla bla Please Enter <code>Link</code> Below.</legend>
        <div class="pure-control-group">
            <label>Link</label>
            <input name="link" type="text" class="pure-input-2-3" placeholder="link" value="" required>
        </div>

        <div class="pure-controls">
            <label class="pure-checkbox">
                <input name="start" type="checkbox"> Start Downloading Instantly.
            </label>
            <button type="submit" class="pure-button pure-button-primary">Generate</button>
        </div>
    <p>To get Help on Using this click <a class="link" href="?help">here</a>. </p>
    </fieldset>
</form>
</div>
<footer class="site-footer">
<p>Script By <a href="#" style="text-decoration: none;color:inherit;">Lorem ipsum</a>.</p>
<p>&copy; 2014 . All rights reserved.</p>
</footer>
</body>
</html>

CSS

html, body {
  height: 100%;
background: #FFF;
}

.header {
       font-family: "omnes-pro", sans-serif;

       padding: 1em;
       text-align: center;
       border-bottom: 1px solid #eee;
       background: #fff;
  }
  .header h1 {
      font-size: 300%;
      font-weight: 100;
      margin: 0;
      color: #4B4B4B;
  }
   .header h2 {
      font-size: 125%;
      font-weight: 100;
      line-height: 1.5;
      margin: 0;
      color: #666;
  }
  .content {

       margin: 0 auto;
  max-width: 768px;
  min-height: 80%;
  /* equal to footer height */
  margin-bottom: -142px;
  }

   .content:after {
   content:"";
  display: block;
  }

  .content .content-subhead {
      font-weight: 300;
      color: #888;

  }

  .link {
  display: inline-block;

  padding-left: 6px;
  text-decoration: none;
  color: #6AB3EC;
  text-shadow: 0 1px 1px rgba(255,255,255,0.9);
  }

  .link:hover {
      color: #3C9CE7;
  }
  .link:before {
      content: "\25BA";
      font-size: 80%;
      display: inline-block;
      padding-right: 3px;
      pointer-events: none;
  }

  .link:hover:before {
      color: #F2BF97;
  }


 .site-footer, .content:after {
  /* .push must be the same height as footer */
  height: 142px;
  width: 300px; margin: 0 auto;

 }

.site-footer { text-align: center;}

Answer 7

如果您希望您的页脚粘性，请将页脚位置固定

position:fixed;

如果您希望它最初位于页面底部而不是位置相对使其绝对

position:absolute;

你也可能想要给你的身体和html 100％的身高。

无法将页脚粘到底部

7 个答案: