2

I have following HTML:

<body>
    <div class="container">
        <div class="aside">
            Lorem
        </div>
        <div class="content">
            Ipsum <br/> dolor <br/> sit <br/> amet <br/>
        </div>
    </div>
</body>

and following CSS:

body { 
    padding-top:50px;
}
.aside {
    width: 300px;
    float:left;
}
.content {
    width: 670px
    float: left;
}

How can i set .aside height is 100% of .container if .container height is 100% of .content content. Thanks.

enter image description here

Community
  • 1
  • 1
Dmitry
  • 242
  • 1
  • 9
  • 20
  • possible duplicate of [How to set element (DIV/TABLE/other) height to 100% of its container?](http://stackoverflow.com/questions/1891670/how-to-set-element-div-table-other-height-to-100-of-its-container) – Paulie_D Apr 28 '15 at 13:23

2 Answers2

5

You should put your aside to absolute position and set height to 100% and set the container to relative like:

.container {
    position: relative;
    height: 100%;
    background-color: black;
}
.aside {
    width: 300px;
    position: absolute;
    background-color: red;
    height: 100%;
}
.content {
    width: 670px;
    background-color: green;
    margin-left: 300px;
}
<div class="container">
  <div class="aside">
    Lorem
  </div>
  <div class="content">
    Ipsum <br/> dolor <br/> sit <br/> amet <br/>
  </div>
</div>
Pik_at
  • 1,459
  • 9
  • 14
4

Try this:

body { 
    padding-top:50px;
}

.container {
   position: relative;
 }

.aside {
    width: 300px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.content {
    width: 670px
    float: left;
    margin-left: 310px;
}
Saiyam Gambhir
  • 536
  • 3
  • 16