-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
什麼是「太大了」？你的窗口以像素爲單位有多高以及內容部分的最終結果是多少？使用您的瀏覽器的檢查工具，這就是他們在那裏。 –