html - CSS 背景 100% 高度 - 怎么办？

Question

在 css 列中，即使内容为空，如何使背景高度为 100%？

我尝试了 height: 100%;、display: block;，但似乎没有任何效果!

背景(高度)填充到内容高度。然后在它下面是完全空的!请检查下面随附的屏幕截图:

我使用的CSS代码如下:

.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;
}

在 HTML 方面，我使用以下内容:

<!-- 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 -->

有什么建议可以解决这个问题吗？

Answer 1

在 css 上设置 height:100vh;

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

Demo