页脚~定位//扭曲
Footer ~ Positioning//With a twist
所以我使用了自动将页脚放在所有内容下方的 '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">
© Hecc
</div>
</body>
</html>
如果我的措辞使这个问题难以形象化,我深表歉意。
非常感谢任何帮助!
你的问题有点模棱两可 - 我想你是在问 "how do I fix my footer to the bottom of the screen (window), not below the content?"。
您可以为此使用固定位置。
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>
所以我使用了自动将页脚放在所有内容下方的 '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">
© Hecc
</div>
</body>
</html>
如果我的措辞使这个问题难以形象化,我深表歉意。 非常感谢任何帮助!
你的问题有点模棱两可 - 我想你是在问 "how do I fix my footer to the bottom of the screen (window), not below the content?"。
您可以为此使用固定位置。
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>