除了高度应该100%覆盖整个侧面

Question

看看我的下面的例子.

//由于删除内容而被删除

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

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

Answer 1

每当您为任何元素赋予100%高度时,还应将body和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>