nach einer langen Sitzung von Versuch und Irrtum mit meinem CSS-Stylesheet, und einem noch längeren WebSearch, der nicht geholfen hat, habe ich mich entschieden, mein Problem hier zu posten und hoffe, dass mir jemand helfen kann.CSS: Height Eigenschaft
Das Problem: Ich versuche, eine Website mit fester Kopfzeile, Fußzeile und Navigationsleiste auf der Seite zu bauen. Wenn ich die height -Eigenschaft des vollständigen HTML-Körpers auf 100 Prozent (oder 100vh) und dann die Höhe des Headers auf 15 Prozent, der Fußzeile auf 5 Prozent und des Inhalts auf 80 Prozent, dann die Höhe des Inhalts Abschnitt ist viel zu groß. Vielleicht verstehe ich diese Eigenschaft nicht gut, weil ich mit CSS nicht so vertraut bin, aber ich denke, es sollte funktionieren.
Hier ist mein Code:
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>Kann jemand erklären, was ist der Fehler in diesem Stylesheet?
Teilen Sie Ihre HTML-Codes –
wir müssen einige HTML – Brad
Und was ist „viel zu groß“? Wie hoch ist dein Fenster in Pixeln und wie hoch ist der Inhaltsbereich? Verwenden Sie die Inspektions-Tools Ihres Browsers, dafür sind sie da. –