-2
经过长时间的试验和我的CSS样式表的错误会议，甚至更长的websearch没有帮助我决定在这里发布我的问题，并希望有人能帮助我。CSS：高度属性
问题：我试图建立一个固定页眉，页脚和导航栏在侧面的网站。当我将完整html body的height属性设置为100％（或100vh），然后将页眉的高度设置为15％，将页脚的高度设置为5％，将内容的高度设置为80％时，则内容的高度部分是大的方式。也许我不太了解这个属性，因为我对css不太熟悉，但我认为它应该起作用。
这里是我的代码：
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #2F4F4F;
background-color: #FFEBCD;
font-family: 'Baloo Thambi', cursive;
}
header {
top: 0px;
position: fixed !important;
position: absolute;
height: 15%;
width: 100%;
background-color: #DC143C;
}
header img {
width: 100%;
height: 100%
}
nav {
text-align: center;
bottom: 5%;
height: 80%;
left: 0px;
position: absolute;
width: 20%;
background-color: #FF7F50;
}
#Content {
top: 15%;
height: 65%;
left: 20%;
position: relative;
overflow: auto;
width: 70%;
padding: 5%;
}
#Buttons {
left: 0px;
float: left;
margin-top: 5%;
}
#Side-Nav {
margin-top: 10%;
}
footer {
bottom: 0px;
position: absolute;
height: 5%;
width: 100%;
background-color: #2F4F4F;
color: #F0F8FF;
text-align: center;
}
.button {
background-color: #008CBA;
border: none;
border-radius: 8px;
color: white;
text-shadow: 2px 2px 2px black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
width: 100px;
margin-right: 10px;
margin-top: 10px;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.button1 {
background-color: #008CBA;
border: none;
border-radius: 8px;
color: white;
text-shadow: 2px 2px 2px black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
width: 60%;
margin: 5%;
}
.button1:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.container {
width: 100%;
margin: 0 auto;
}
.container img {
width: 100%;
}
table,
th,
td {
border: 1px solid #2F4F4F;
text-align: left;
}<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>CL - Craft</title>
<meta name="viewport" content="width=device-width,
\t \t initial-scale=1.0" />
<link rel="stylesheet" href="style.css?v2" type="text/css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Baloo+Thambi" rel="stylesheet">
<link rel="icon" type="image/png" href="/img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/img/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/img/manifest.json">
<link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/img/favicon.ico">
<meta name="msapplication-config" content="/img/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<a href="index.html">
<img src="img/header.png">
</a>
</header>
<nav>
</br>
Navigation:
<section id="Side-Nav">
<a href="aktuelles.html" class="button1">Aktuelles</a>
<a href="karte.html" class="button1">Karte</a>
<a href="hilfe.html" class="button1">Info's</a>
<a href="downloads.html" class="button1">Downloads</a> \t
</section>
</nav>
<section id="Content">
<h1>Karte</h1>
<iframe src="http://www.cl-craft.de:8123" width="100%" height="100%">
</iframe>
</br>
</br>
<section id="Buttons">
<a href="aktuelles.html" class="button">Aktuelles</a>
<a href="karte.html" class="button">Karte</a>
<a href="hilfe.html" class="button">Info's</a>
<a href="downloads.html" class="button">Downloads</a>
</section>
</section>
<footer>
<?php include("serverstatus.php"); ?>
</footer>
</body>
</html>有人能解释一下，什么是这个样式表的错误？
分享您的HTML代码 –
我们需要一些HTML – Brad
什么是“太大了”？你的窗口以像素为单位有多高以及内容部分的最终结果是多少？使用您的浏览器的检查工具，这就是他们在那里。 –