programmer
programmer

Reputation: 167

CSS background 100% height - How to do?

In css column, how can I make the background 100% of the height, even if content is empty?

I tried height: 100%;, display: block;, but nothing seems working!

The background (height) fills up till the content height. Then below that it is completely empty! Please check the screenshot attached below:

screenshot

CSS Code that I am using is as follows:

.computer-wrapper{
    width: 1000px;
    margin: 0 auto;
    border: 1px solid #7771a0;
    border-radius: 5px;
    min-height: 600px;
}
.computer-left-column{
    width: 200px;
    float: left;
    background-color: #7771a0;
}
.computer-middle-column{
    width: 600px;
    float: left;
    background-color: green;
}
.computer-right-column{
    width: 200px;
    float: right;
    background-color: blue;
}

In HTML side, I am using the following:

<!-- left column start -->
<div class="computer-left-column">
    <ul id="treemenu" class="treeview">
        <li>Scripts
            <ul>
                <li><a href="#">ASP.NET Scripts</a></li>
                <li><a href="#">PHP Scripts</a></li>
                <li><a href="#">CMS Modules &amp; Plugins</a></li>
            </ul>
        </li>
        <li>Software
            <ul>
                <li><a href="#">Windows</a></li>
                <li><a href="#">Linux</a></li>
                <li><a href="#">MAC</a></li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript">
        ddtreemenu.createTree("treemenu", false)
    </script>
</div>
<!-- left column end -->

<!-- middle column start -->
<div class="computer-middle-column">
    Main Content Area
</div>

<!-- middle column end -->

<!-- right column start -->
<div class="computer-right-column">
    Right Sidebar Advertisement Area
</div>
<!-- right column end -->

Any suggestion how I can fix this?

Upvotes: 0

Views: 162

Answers (5)

ShibinRagh
ShibinRagh

Reputation: 6646

set on css height:100vh;

.computer-middle-column{
    height:100vh;
}
.computer-wrapper{
    height: 100vh;
    overflow: hidden;
 }

Demo

Upvotes: 1

Nor Sakinah Abdullah
Nor Sakinah Abdullah

Reputation: 371

Firstly, you need to add height:100% to your body and html.

body,html{height:100%;}

Then, height:100% to your selected div will works.

like here

Good Luck!!

update

Do you want it to be like this?.

or

this?

Upvotes: 0

Sobin Augustine
Sobin Augustine

Reputation: 3765

it was not the background you have to make 100%, its the div which you have to make 100%, for that there are many ways,

You can use absolute positioning. as @Hosney answered

.computer-middle-column{
    width: 600px;
    position:absolute;
    top:0;
    bottom:0;
    background-color: green;
}

Upvotes: 0

Viji Nainar
Viji Nainar

Reputation: 1

You can give the following css style

background-size:cover;

Upvotes: 0

H77
H77

Reputation: 5967

You could use position absolute with top, and bottom set to 0;

e.g.

.computer-middle-column{
    width: 600px;
    position:absolute;
    top:0;
    bottom:0;
    background-color: green;
}

Upvotes: 0

Related Questions