gpt4 book ai didi

html - 在我添加内容之前,在遵循教程到底部后页脚被定位?

转载 作者:行者123 更新时间:2023-11-28 08:42:23 25 4
gpt4 key购买 nike

您好,我正在尝试将页脚放在页面底部 我在网上学习了一些教程,我认为它有它并且它到了底部但是当我开始添加内容时它滚动了一半一路向上。

我不需要它始终出现在所有内容的下方...我是初学者,在学习教程的过程中尝试学习,所以您能记住这一点吗...提前致谢!

这是我的 style.css

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local(OpenSans), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
* {
margin: 0;
padding: 0
}
body {
background: #f5f5f5;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
height: 100%
}
a {
text-decoration: none;
color: #444
}
a:hover {
color: blue
}
section {
background: #000;
box-shadow: 0 2px 2px #ebebeb
}
header {
margin: 0 auto;
text-align: center;
position: relative;
background: url(blackboardbg.jpg) 0 no-repeat;
background-size: 100% 100%
}
nav li {
display: inline-block;
padding: 40px 30px 37px 0
}
nav li:nth-child(3) {
padding-right: 200px
}
nav li:nth-child(4) {
padding-left: 220px
}
.logo {
background: url(images/logo.png) 50% 0 no-repeat;
background-size: 300px 211px;
width: 300px;
height: 211px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 21px
}
#locator {
position: absolute;
visibility: show;
left: 950px;
top: 165px;
z-index: 100
}
p {
margin: 150px auto 0;
width: 600px;
text-align: center;
font-size: 15px
}
navmain {
line-height: 30px;
background-color: #eee;
border: 1px solid #b9b9b9;
border-radius: 5px;
height: 300px;
width: 200px;
float: left;
padding: 5px
}
sectionblank {
width: 60px;
float: left;
padding: 10px
}
sectionmain {
background-color: #eee;
border: 1px solid #b9b9b9;
border-radius: 5px;
width: 700px;
float: left;
padding: 10px
}
#container {
min-height: 100%;
height: 100%;
position: relative
}
#contentmain {
width: 75%;
margin: 0 auto
}
#content {
padding: 10px;
padding-bottom: 80px
/* Height of the footer element */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
background: url(blackboardbg.jpg) 0 no-repeat;
background-size: 100% 100%
}

和 index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>
Casper Creations
</title>
<meta content="Casper Creations" name="description">
<meta content="Lucy Smith" name="author">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<section>
<header>
<nav>
<ul>
<li>
<img src="buttons/home.png">
</li>

<li>
<img src="buttons/about.png">
</li>

<li>
<img src="buttons/services.png">
</li>

<li>
<img src="buttons/gallery.png">
</li>

<li>
<img src="buttons/FAQ.png">
</li>

<li>
<img src="buttons/contact.png">
</li>
</ul>
</nav>

<div class="logo">
</div>
</header>
</section>

<p>
</p>

<div id="contentmain">
<div id="locator">
<img src="callnow.png">
<br>
</div>
test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>
<b>Categories</b>
<br>
<br>
<i>Kids</i>
<br>&larr; Frozen
<br>&larr; Peppa Pig
<br>&larr; My Little Pony
<br>&larr; Mr Tumble
<br>

<h1>
Welcome
</h1>

<p>
Welcome to Casper Creations
</p>
</div>
</div>

<div id="footer">
<table style="width: 100%; height: 100%">
<tr style="vertical-align: central">
<td style="text-align: center; color:#FFFFFF; font-size: 12px">
<b>Special Offers | Advanced Search | Reviews | Create
an Account | Log In</b>
</td>
</tr>
</table>
</div>
</body>

</html>

最佳答案

我刚刚在 Fiddle 中添加并调整了您的标记.它没有按预期工作的原因是,#footerposition:absolute; 设置为 bottom:0;,但是此位置相对于位置不是 static 的下一个父级。我刚刚用 id="container" 移动了 div 中的 #footer ,它有 position:relative; 所以页脚将是显示在底部。

因为页脚的字体颜色是白色,所以我刚刚添加了一个不同的虚拟图像来进行说明。

进一步引用可能有用:https://developer.mozilla.org/en-US/docs/Web/CSS/position

@font-face {
font-family:'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local(OpenSans), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}
* {
margin: 0;
padding: 0
}
body {
background: #f5f5f5;
font-family:'Open Sans', sans-serif;
margin: 0;
padding: 0;
height: 100%
}
a {
text-decoration: none;
color: #444
}
a:hover {
color: blue
}
section {
background: #000;
box-shadow: 0 2px 2px #ebebeb
}
header {
margin: 0 auto;
text-align: center;
position: relative;
background: url(blackboardbg.jpg) 0 no-repeat;
background-size: 100% 100%
}
nav li {
display: inline-block;
padding: 40px 30px 37px 0
}
nav li:nth-child(3) {
padding-right: 200px
}
nav li:nth-child(4) {
padding-left: 220px
}
.logo {
background: url(images/logo.png) 50% 0 no-repeat;
background-size: 300px 211px;
width: 300px;
height: 211px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 21px
}
#locator {
position: absolute;
visibility: show;
left: 950px;
top: 165px;
z-index: 100
}
p {
margin: 150px auto 0;
width: 600px;
text-align: center;
font-size: 15px
}
#navmain {
line-height: 30px;
background-color: #eee;
border: 1px solid #b9b9b9;
border-radius: 5px;
height: 300px;
width: 200px;
float: left;
padding: 5px
}
#sectionblank {
width: 60px;
float: left;
padding: 10px
}
#sectionmain {
background-color: #eee;
border: 1px solid #b9b9b9;
border-radius: 5px;
width: 700px;
float: left;
padding: 10px
}
#container {
min-height: 100%;
height: 100%;
position: relative
}
#contentmain {
width: 75%;
margin: 0 auto
}
#content {
padding: 10px;
padding-bottom: 80px
/* Height of the footer element */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Height of the footer */
background: url(http://placekitten.com/g/500/60) 0 no-repeat;
background-size: 100% 100%
}
<div id="container">
<section>
<header>
<nav>
<ul>
<li>
<img src="buttons/home.png">
</li>
<li>
<img src="buttons/about.png">
</li>
<li>
<img src="buttons/services.png">
</li>
<li>
<img src="buttons/gallery.png">
</li>
<li>
<img src="buttons/FAQ.png">
</li>
<li>
<img src="buttons/contact.png">
</li>
</ul>
</nav>
<div class="logo"></div>
</header>
</section>
<p></p>
<div id="contentmain">
<div id="locator">
<img src="callnow.png" />
<br>
</div>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br>test
<br> <b>Categories</b>

<br>
<br> <i>Kids</i>

<br>&larr; Frozen
<br>&larr; Peppa Pig
<br>&larr; My Little Pony
<br>&larr; Mr Tumble
<br>
<h1>
Welcome
</h1>

<p>Welcome to Casper Creations</p>
</div>

<div id="footer">
<table style="width: 100%; height: 100%">
<tr style="vertical-align: central">
<td style="text-align: center; color:#FFFFFF; font-size: 12px"> <b>Special Offers | Advanced Search | Reviews | Create
an Account | Log In</b>

</td>
</tr>
</table>
</div>
</div>

关于html - 在我添加内容之前,在遵循教程到底部后页脚被定位?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27761961/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com