HTML 100%高度大于窗口的问题

Question

HTML 100%高度大于窗口的问题

htmlcssheight

3

我在设计一个页面布局，顶部有一个宽度为浏览器窗口100%的垂直头部，在下方是两列。左侧是侧边栏，右侧是主要内容列，并且两者都必须覆盖其余窗口。

问题在于：如果头部高度为45像素，而侧边栏高度为100％，则它们的高度加起来将是（100％+ 45px），这意味着整个侧边栏比浏览器窗口大。我该如何解决这个问题？

最终我想要能够在主要内容和侧边栏中分别滚动，而顶部的头部应该固定在顶部。

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

I hope you can help me

- MXMLN

位置：绝对可以工作 - user6342059

如果您的页眉高度是固定的，您可以使用 height: calc(100% - 45px);。请注意，这是 CSS3，不适用于旧浏览器。caniuse - Hazonko

您的建议 height: calc(100% - 45px); 不幸地没有解决问题。现在两个部分的高度完全相同，但是底部现在有一个高度为45像素的白色空间。 - MXMLN

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kukkuz · 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>