页脚〜定位//扭曲答案

【问题标题】：Footer ~ Positioning//With a twist页脚〜定位//扭曲
【发布时间】：2016-11-06 16:59:24
【问题描述】：

所以我使用了“粘滞页脚”代码，它自动将页脚置于所有内容的下方，我的问题是我的内容高度设置为 1300 像素，这意味着如果您的屏幕高度超过 1300像素页脚不会出现在屏幕底部，而是出现在内容下方。

这是我的代码：

@import 'https://fonts.googleapis.com/css?family=PT+Mono';


body {
    font-family: 'PT Mono', monospace;
    background: linear-gradient(to bottom, #1D4350 , #A43931);
    background-attachment: scroll;
}
#content {
  height: 1300px;
  width: 100%;
}
html, #wrapper {
    max-width: 100%;
    min-height: 100%;
    min-width: 960px; 
    margin: 0 auto;
    width: 100%;
}
#wrapper {
    position: relative;
}
.Octagon { 
    color: #2aa186;
    text-align: center;
    line-height: 30%;
    margin-top: 25px;
}
.LT {
    text-align: center;
    color: #3a5454;
    line-height: 0%;
    font-style: italic;
}
.boi {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
  right: 16px;
}
.boi:active {
    top: 2px;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
}
#verr {
    
}
.boi:active, 
.iob:active {
    top: 2px;
}
#manyarms {
    position: absolute;
    margin-top: 30px;
    margin-left: 31px;
}
#sensible {
    position: absolute;
    margin-top: 30px;
    margin-right: 31px;
    right: 10px;
}
.boi:hover,
.iob:hover {
    text-shadow: 0 0 10px #a193ff;
}
#footer {
    text-align: right;
    margin-right: 10px;
}

<html>
<head>
        <title>The Pragmatic Octopus</title>
        <meta charset="utf-8"/>
    	<link rel='stylesheet' href='style.css'/>
	    <script src='script.js'></script> 
</head>
<body>
<div id="wrapper">
<div id="header">
	    <h1 class="Octagon">The Pragmatic Octopus</h1>
	    <p class="LT">Lee Townsend</p>
        <a href="www.google.com">
	    <p class="boi">Contact</p>
        </a>
        <a href="www.google.com">
    	<p class="iob">Information</p>
        </a>
</div>
<div id="content">
    <div id="manyarms">
        <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792        .jpg" alt="mmm~" style="width:310px; height:250px;">
        <p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
    </div>
    <div id="sensible">
        <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
        <p style="color:#6458b7;">He loves to pose for photos!</p>
    </div>
</div>
</div>
      <div id="footer">
      &copy; Hecc
      </div>
</body>
</html>

如果我的措辞使这个问题难以想象，我深表歉意。非常感谢任何帮助！

【问题讨论】：

ALSO：我有什么办法可以让图片的标题更接近所述图片的底部？
那么，您希望页脚始终出现在窗口底部吗？

标签： html css positioning footer

【解决方案1】：

您的问题有点模棱两可 - 我想您是在问“如何将页脚固定到屏幕（窗口）底部，而不是内容下方？”。

您可以为此使用固定位置。

article {
  height: 1300px;
}
footer {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background: lightpink;
  padding: 0 1rem;
}

<body>
  <article>
    <p>This is the page content</p>
  </article>
  <footer>
    <p>I am a fixed footer</p>
  </footer>
</body>

【讨论】：

谢谢！这解决了我的问题并帮助我解决了我遇到的其他定位问题。