Question

所以我使用了“Sticky Footer”代码自动将页脚放在所有内容之下，我的问题是我的内容高度设置为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>

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

Answer 1

你的问题有点含糊不清 - 我想你要问的是如何将我的页脚修复到屏幕底部（窗口），而不是在内容之下？＆＃34;。

您可以使用固定的位置。

＆＃13;

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

＆＃13;

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

＆＃13;

页脚〜定位//扭曲

1 个答案: