HTML 100% 高度大于 window

Question

我正在设计一个顶部垂直 header 的布局，宽度为浏览器 window 的 100%，并且在两列下方。左侧的侧边栏和主栏，两者都应覆盖 window.

的其余部分

这是问题所在：如果 header 的高度为 45px，侧边栏的高度为 100%，则高度加在一起将为 (100% + 45px)，这意味着整个边比浏览器 window 大。我怎么解决这个问题？

最后，我希望能够在主视图栏和视线栏中单独滚动 tenter 代码，并且 header 应该固定在顶部。

这是一个小例子：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>

希望你能帮帮我

Answer 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>

HTML 100% 高度大于 window

HTML 100% height bigger than window

html

css

height