html - 无法让页脚停留在页面底部
问题描述
我已经尝试了几个小时,并在 stackoverflow 和其他地方查看了几个关于它的主题。但我似乎无法解决它..
body {
background-color: #1a3041;
background-image: radial-gradient(#757580, #1a3041);
background-repeat: no-repeat;
background-size: cover;
}
html {height:100%}
.header {
border-style:solid;
border-width: 2px;
border-color: #fa6800;
background-color: #717171;
font-family: open sans;
color: #c1c1c1;
padding:0px;
margin:5px;
margin-top:20px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.header h1{
display:inline;
font-size:40px;
padding-left:10px;
}
#slogan {
display: inline-block;
font-size:20px;
font-style:italic;
float:center;
line-height: normal;
vertical-align: center;
padding-right:10px;
margin-top:0px;
}
#menu {
display: inline-block;
font-size:25px;
font-weight:bold;
float:right;
line-height: normal;
vertical-align: bottom;
margin-top:10px;
}
.main {
position:absolute;
background-color:#cdd1d5;
padding: 10px;
margin: 25px;
margin-top:30px;
margin-bottom: 10px;
top:70px;
min-height: calc(100% - 130px - 35px);
left:0;
right:0;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
.footer {
position: absolute;
bottom:0px;
left:5px;
right:5px;
height:30px;
overflow:hidden;
border-style:solid;
border-bottom: none;
border-width: 2px;
border-color: #fa6800;
background-color:#333333;
padding-left:10px;
vertical-align:top;
font-size:12px;
font-family: open sans;
color: #c1c1c1;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
a:link{
text-decoration:none;
}
a:link.title, a:visited.title {
color:#c1c1c1;
}
a:link.menu, a:visited.menu, a:link.current, a:visited.current {
color:#c1c1c1;
text-decoration:none;
padding:10px;
}
a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
color:#c1c1c1;
text-decoration:none;
padding:10px;
padding-right:20px;
}
a:link:hover.menu{
background-color:#fa6800;
padding:10px;
}
a:link:hover.lastmenu{
background-color:#fa6800;
padding:10px;
padding-right:20px;
}
a:link.current{
background-color:#333333;
padding:10px;
}
a:link.lastcurrent{
background-color:#333333;
padding:10px;
padding-right:20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>
所以我有两个问题: - 我的页脚不会粘在页面底部 - 如果窗口太小,我的“主要”内容 div 不会像它应该在页脚之前那样停止。(它只是继续到页面的末尾)
我已经阅读了很多应该解决它的东西,但它大多不起作用。例如,将页脚设置为相对,将其粘贴在菜单下方。将内容设置为相对会将其粘贴到页面的中间......
解决方案
只需从 .menu 和 .footer 类样式中删除绝对位置即可。你会得到想要的结果。:)
body {
background-color: #1a3041;
background-image: radial-gradient(#757580, #1a3041);
background-repeat: no-repeat;
background-size: cover;
}
html {height:100%}
.header {
border-style:solid;
border-width: 2px;
border-color: #fa6800;
background-color: #717171;
font-family: open sans;
color: #c1c1c1;
padding:0px;
margin:5px;
margin-top:20px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.header h1{
display:inline;
font-size:40px;
padding-left:10px;
}
#slogan {
display: inline-block;
font-size:20px;
font-style:italic;
float:center;
line-height: normal;
vertical-align: center;
padding-right:10px;
margin-top:0px;
}
#menu {
display: inline-block;
font-size:25px;
font-weight:bold;
float:right;
line-height: normal;
vertical-align: bottom;
margin-top:10px;
}
.main {
background-color:#cdd1d5;
padding: 10px;
margin: 25px;
margin-top:30px;
margin-bottom: 10px;
top:70px;
min-height: calc(100% - 130px - 35px);
left:0;
right:0;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
.footer {
left:5px;
right:5px;
height:30px;
overflow:hidden;
border-style:solid;
border-bottom: none;
border-width: 2px;
border-color: #fa6800;
background-color:#333333;
padding-left:10px;
vertical-align:top;
font-size:12px;
font-family: open sans;
color: #c1c1c1;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
a:link{
text-decoration:none;
}
a:link.title, a:visited.title {
color:#c1c1c1;
}
a:link.menu, a:visited.menu, a:link.current, a:visited.current {
color:#c1c1c1;
text-decoration:none;
padding:10px;
}
a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
color:#c1c1c1;
text-decoration:none;
padding:10px;
padding-right:20px;
}
a:link:hover.menu{
background-color:#fa6800;
padding:10px;
}
a:link:hover.lastmenu{
background-color:#fa6800;
padding:10px;
padding-right:20px;
}
a:link.current{
background-color:#333333;
padding:10px;
}
a:link.lastcurrent{
background-color:#333333;
padding:10px;
padding-right:20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>
推荐阅读
- jquery - jQuery 错误 > inject.preload(新手)
- php - 为什么点击搜索按钮后出现分页错误?
- mongodb - 环回 MongoDB - 部署
- intellij-idea - Gosu 中有效的@SuppressWarnings 警告名称列表是什么?
- memory-management - 在 Guest 上使用 kmalloc 的连续物理内存
- html - 在 HTML 中的表格上添加滚动条
- ckeditor - 避免将短代码包含在
在ckeditor 4中
- java - openjdk 破坏 docker 构建
- c# - 将输入限制为仅数字和 xamarin 表单中的句号
- html - md-tabs 没有出现在页面上