html - CSS background 100% height - How to do? -
in css column, how can make background 100% of height, if content empty?
i tried height: 100%;
, display: block;
, nothing seems working!
the background (height) fills till content height. below empty! please check screenshot attached below:
css code using 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, using 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 can fix this?
set on css height:100vh;
.computer-middle-column{ height:100vh; } .computer-wrapper{ height: 100vh; overflow: hidden; }
Comments
Post a Comment