How can i set height value 100% for
in container with height is not 100% of body not using tables

Question

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

Pik_at · Accepted Answer

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>

How can i set height value 100% for <aside> in container with height is not 100% of body not using tables

Tags:

html

css

Dmitry

1 Answers

Pik_at

Recent Activity

Donate For Us