侧边高度应为 100% 覆盖整个侧面

Question

看看我下面的例子。

// 因删除内容而被移除

.aside {
    position: relative;
    float: left;
    width: 195px;
    top: 0px;
    bottom: 0px;
    background-color: #ebddca;
    height: 100%;
}

到目前为止，我还没有找到正确的解决方案。不过，我正朝着正确的方向前进。问题是，在我上面的 "Example #1" 中，即使 "main" 部分只有几行代码，右侧也有一个滚动条。我只希望在有更多代码行时显示滚动条，例如 "Example #2".

Answer 1

每当您为任何元素提供 100% 高度时，您还应该将正文和 html 文档高度设置为 100%。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素不是绝对定位的，则该值计算为 'auto'。

* {
  margin: 0;
  padding: 0;
  overflow: auto;
}
html,
body {
  height: 100%;
}
header,
footer,
article,
section,
hgroup,
nav,
figure {
  display: block
}
body {
  font-size: 1em;
  color: #fcfcfc;
  background-color: #f8f4eb;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
 *  HTML5 Sections
 */

.header {
  height: 72px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
}
.nav {
  position: relative;
  height: 52px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.main {
  position: relative;
  height: 100%;
  background-color: #f8f4eb;
  overflow: hidden;
}
.aside {
  
  float: left;
  width: 195px;
 
  background-color: #ebddca;
  height: 100%;
}

<aside class="aside" id="asidecontainer">

  <div class="asidewrapper">

    <font color="#000">The background of this aside bar should be totally to the bottom of the page.</font>

  </div>
</aside>
<div id="asidehider" class="asideborder"></div>

<main class="main" id="main">

  <font color="#000">
        
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
        All the content goes here<br />
    
    </font>

</main>

Answer 2

使用这个 class。

.aside {
  position: relative;
  float: left;
  width: 195px;
  top: 0px;
  bottom: 0px;
  background-color: #ebddca;
  height: 100vh;
}

关键是使用 100vh 而不是 100%

Answer 3

仅将 height:100px 添加到 body 和 html。

问题
您将 height:100%; 给 aside，它试图从没有高度的 parents 获得。

html,
body
{
 height:100%;
}

Jsfiddle

Answer 4

您的 <aside> 和 <main> 必须有一个显示为 flex 且对齐项目的父元素。您还必须在 css 中清理 aside 和 main 类。 jsfiddle file

侧边高度应为 100% 覆盖整个侧面

Aside height should be 100% covering the whole side

css

height

sidebar