Reputation: 167
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:
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 & 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
Reputation: 6646
set on css height:100vh;
.computer-middle-column{
height:100vh;
}
.computer-wrapper{
height: 100vh;
overflow: hidden;
}
Upvotes: 1
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.
Good Luck!!
update
Do you want it to be like this?.
or
this?
Upvotes: 0
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
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