Question

在我的css样式表进行了长时间的试验和错误之后，甚至更长的网络搜索没有帮助我决定在这里发布我的问题并希望，有人可以帮助我。

问题：我尝试在侧面构建一个带有固定页眉，页脚和导航栏的网站。当我将完整的html主体的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,
		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>	
    </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>

有人可以解释一下，这个样式表中的错误是什么？

Answer 1

问题在于您通过绝对定位所有元素来构建布局。相反，您应该使用flexbox或类似引导网格的东西。由于一切都是绝对定位的，因此无法动态调整屏幕尺寸。您可以通过对padding和z-index进行一些调整来修复滚动条问题，但这只会在您正在查看的任何设备上修复它。一旦你在另一个屏幕上打开它，一切都会破裂。

查看http://getbootstrap.com/ - 在您上面发布的代码中实现它应该相对简单。

此外，如果你想升级你的CSS技能，你可以免费试用这个伟大的flexbox课程 - http://flexbox.io/

CSS：高度属性

1 个答案: