Question

在css专栏中，即使内容为空，如何将背景设为100％的高度？

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

背景（高度）填充到内容高度。然后在它下面它是完全空的！请查看下面附带的屏幕截图：

screenshot

我使用的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

Answer 2

你可以使用绝对位置顶部，底部设置为0;

e.g。

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

Answer 3

您可以提供以下css样式

背景尺寸：盖;

Answer 4

首先，您需要为身体和html添加高度：100％。

body,html{height:100%;}

然后，高度：100％到您选择的div将起作用。

like here

祝你好运!!

<强>更新

你想要它像this吗？

或

this？

Answer 5

这不是你必须做100％的背景，而是你必须做出100％的div，因为有很多方法，

您可以使用绝对定位。正如@Hosney的回答

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

CSS背景100％身高 - 怎么办？

5 个答案: