gpt4 book ai didi

html - 页脚不会留在我的某个页面的底部

转载 作者:行者123 更新时间:2023-11-27 23:17:49 25 4
gpt4 key购买 nike

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-image: url(../images/bg.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
}


/*----------------------Header Styling------------------------------------*/

header {
background-color: white;
border-bottom-style: solid;
overflow: auto;
height: 200px;
font-family: "Freehand521 BT", Arial, Sans-serif;
}

header p {
font-family: "Freehand521 BT", Arial, Sans-serif;
margin: 20px 0px 0px 20px;
font-size: 60px;

}

header img {
float: right;
border-left: solid;
}

/*-------------------------------Main Nav Styling--------------------------------*/

#mainlinks {
margin-top: 60px;
}

#mainlinks ul {
margin-bottom: 0px;
}

#mainlinks a {
list-style-type: none;
text-decoration: none;
color: black;
margin-right: 90px;
margin-left: -10px;
font-size: 25px;
}

#mainlinks li {
display: inline;
padding-right: 5px;
}

/*----------------------------------Secondary Nav Styling----------------------------------------------------*/


.secondlinks li {
display: inline;
list-style-type: none;
}

.secondlinks ul {
padding-left: 0px;
}


/*-------------------------------------Main Content Styling--------------------------------------------------------*/

#contentwrap {
background-color: rgba(231, 231, 231, .7);
border-style: solid;
border-radius: 10px;
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
padding: 15px;
font-family: "Freehand521 BT", Arial, Sans-serif;
font-size: 17px;

}

#contentwrap img {
border-style: solid;

}
/*-------------------------------------------Footer Styling------------------------------------------------------*/

footer {
background-color: #fff;
border-top-style: solid;
margin-top: 20px;
width: 100%;
height: 130px;
font-family: "Freehand521 BT", Arial, Sans-serif;
font-size: 15px;
}

#footernav {
float: right;
}

#footernav li {
display: inline;
}

#footernav a {
text-decoration: none;
margin-right: 30px;

}
<!DOCTYPE html>
<html>
<head>
<title>Defenders Of The Stars!--The Official Sailor Moon Fanpage!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="images/SM.ico">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="style/normalize.css">
</head>
<body>
<header>
<img src="images/HeaderSilouette.png" alt="Defenders Of The Stars Header" width="200" height="200">
<p>Defenders of the stars!</p>
<nav id="mainlinks">
<ul>
<li><a href="main.html">Home</a></li>
<li><a href="ss.html">Sailor Senshi</a></li>
<li><a href="villains.html">Villains</a></li>
</ul>
</nav>
</header>
<div id="contentwrap">
<h1> Welcome Fans!</h1>
<p>Welcome to the Official Sailor Moon Fanpage! Here you will find a lot of information about the Sailor Moon Universe! Including Characters and villains alike, As well as an overview of the story so far. We will also keep this Page updated with the latest happenings in the world of Sailor Moon!</p>
<p><u>July 5 2014</u> - New Sailor Moon Anime, Sailor Moon Crystal is released!</p>
</div>
<footer>
<p id ="copyright">&copy; Copyright 2016 Jorge Goris.<br />Designed and developed by Jorge Goris.</p>
<nav id="footernav">
<ul>
<li><a href="main.html">Home</a></li>
<li><a href="ss.html">Sailor Senshi</a></li>
<li><a href="villains.html">Villains</a></li>
</ul>
</nav>
</footer>
</body>
</html>

这是我的代码片段。在我的主页中,我一直在页脚下方留出一点空间。设置高度似乎对其他页面有效,因为它们有很多内容。然而,我的主页没有,所以页脚不会一直向下。我已经尝试了很多不同的方法来纠正这个问题,但我似乎做不到。我究竟做错了什么?

最佳答案

将此添加到 #contentwrap:

padding-bottom: 130px; 
min-height: 100%;

这是页脚:

position: relative;
margin-top: -130px;
clear: both;

如果您稍后更改页脚的高度,请相应地更改上面的值。 Working codepen

关于html - 页脚不会留在我的某个页面的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42356324/

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