侧面高度应为整个侧面的100％ [英] Aside height should be 100% covering the whole side

问题描述

查看我的以下示例.

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

// Removed due to deleted content

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

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

So far I haven't been able to find the correct solution. I'm getting in the right direction though. The thing is, in my above "Example #1", there is a scrollbar on the right even when there is only a few lines of code in the "main" section. I only want a scrollbar to be displayed once there is more lines of code, like in "Example #2".

推荐答案

每当您为任何元素赋予100％的高度时，还应将body和html文档的高度设置为100％.百分比是根据高度计算的所生成的框的包含块.如果未明确指定包含块的高度(即，它取决于内容的高度)，并且此元素的位置不是绝对的，则该值将计算为自动".

Whenever you are giving 100 % height to any element , you should also set body and html document height to 100%.The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to '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>

这篇关于侧面高度应为整个侧面的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！