Aside height should be 100% covering the whole side

问题

Check out my below examples.

// Removed due to deleted content

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

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".

回答1:

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>

回答2:

Use this class.

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

key is to use 100vh instead of 100%

回答3:

your <aside> and <main> has to have a parent element which is displayed as a flex and has aligned items. You also have to clean up aside and main classes in css. jsfiddle file

回答4:

Only add height:100px to the body and html.

Problem
You give height:100%; to the asidewhich is trying to get from its parents where they do not have height.

html,
body
{
 height:100%;
}

Jsfiddle

来源：https://stackoverflow.com/questions/33389583/aside-height-should-be-100-covering-the-whole-side

标签

css

height

sidebar