-2
после долгой сессии проб и ошибок с моей таблицей стилей CSS, а также более длинный веб-поиск, который не помог мне решить эту проблему здесь и надеюсь, что кто-то может мне помочь.CSS: Height Property
Проблема: Я пытаюсь создать веб-сайт с фиксированным заголовком, нижним колонтитулом и навигационной панелью сбоку. Когда я устанавливаю свойство height полного тела html на 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
А что такое «слишком большой»? Насколько высоко ваше окно в пикселях и насколько высока область содержимого в итоге? Используйте инструменты проверки браузеров, вот для чего они нужны. –