HTML 100% 高度大于窗口答案

【问题标题】：HTML 100% height bigger than windowHTML 100% 高度大于窗口
【发布时间】：2016-08-23 01:15:09
【问题描述】：

我正在处理一个布局，顶部有一个垂直标题，宽度为浏览器窗口的 100%，低于两列。左侧的侧边栏和主列都应覆盖窗口的其余部分。

问题来了：如果标题的高度为 45 像素，而侧边栏的高度为 100%，则高度加起来将是 (100% + 45 像素)，这意味着整个侧面比浏览器窗口大。我怎么解决这个问题？

最后我希望能够在主和视线栏和标题栏分别滚动拉幅代码。

这是一个小例子：Plunkr

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 13px;
}

html, body, #wrapper, #main {
  width: 100%;
  height: 100%;
}

header, #main {
  width: 100%;
}


/* Header */
header {
  height: 45px;
  background-color: green;
}

header div {
  float: left;
}

header #right {
  float: right;
}


/* Main */
#main section {
  float: left;
}

#main #sidebar {
  background-color: red;
  width: 190px;
  height: 100%;
}

#main #content {
  background-color: yellow;
  height: 100%;
}

<html>
<head>
</head>

 <body>
   <div id="wrapper">
	  <header>
      Header
	  </header>
  	<div id="main">
	  	<section id="sidebar">
	  		Sidebar
  		</section> <!-- #sidebar -->
  		<section id="content">
	  		Content
  		</section> <!-- #content -->
  	</div><!-- #main -->
  </div><!-- #wrapper -->
</body>
</html>

希望你能帮到我

【问题讨论】：

职位：绝对可以工作
如果您的标题高度是静态的，您可以使用height: calc(100% - 45px);。请注意，这是 css3，无法在旧浏览器中使用。 caniuse
很遗憾，您的建议height: calc(100% - 45px); 并没有解决问题。这两个部分现在处于精确高度，但底部现在有一个高度为 45 像素的空白区域。

标签： html css height

【解决方案1】：

保持header 不变将解决此问题。将position: fixed 添加到header 即可。

让我知道您对此的看法。谢谢！

编辑：

将此添加到sidebar 和content：

  height: calc(100% - 45px);
  padding-top: 45px;

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 13px;
}

html, body, #wrapper, #main {
  width: 100%;
  height: 100%;
}

header, #main {
  width: 100%;
}


/* Header */
header {
  height: 45px;
  background-color: green;
  position: fixed;
}

header div {
  float: left;
}

header #right {
  float: right;
}


/* Main */
#main section {
  float: left;
}

#main #sidebar {
  background-color: red;
  width: 190px;
  height: calc(100% - 45px);
  padding-top: 45px;
}

#main #content {
  background-color: yellow;
  height: calc(100% - 45px);
  padding-top: 45px;
}

<html>
<head>
</head>

 <body>
   <div id="wrapper">
	  <header>
      Header
	  </header>
  	<div id="main">
	  	<section id="sidebar">
	  		Sidebar
  		</section> <!-- #sidebar -->
  		<section id="content">
	  		Content
  		</section> <!-- #content -->
  	</div><!-- #main -->
  </div><!-- #wrapper -->
</body>
</html>

【讨论】：

嗨kukkuz，谢谢你的回复。您的解决方案看起来不错，但现在文本（“侧边栏”和“内容”）位于标题后面。边距或填充语句会导致最初的问题。
当然会……因为sidebar 和content 是100%
@make：编辑了答案 - 现在检查一下，让我知道您的反馈？
是的，它们的高度为 100%，但侧边栏中的文本和内容现在位于标题后面，这又造成了另一个问题。
@make 不在标题后面。