CSS背景100％高度 - 怎么办？答案

【问题标题】：CSS background 100% height - How to do?CSS背景100％高度 - 怎么办？
【发布时间】：2014-03-24 15:38:10
【问题描述】：

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

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

【问题讨论】：

Height Percentage not working css的可能重复

标签： html css

【解决方案1】：

在css上设置height:100vh;

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

Demo

【讨论】：

您好，非常感谢您的帮助。但是列高溢出了包装器。有什么办法让它保持在里面吗？见截图：oi57.tinypic.com/zx0dol.jpg
demo.expect360.com 是开发页面的链接。相同的代码，但在这里它超出了包装器，但在小提琴中，它比包装器短。
编辑了我的答案和演示链接

【解决方案2】：

您可以使用绝对位置，将顶部和底部设置为 0；

例如

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

【讨论】：

【解决方案3】：

你可以给下面的css样式

背景尺寸：封面；

【讨论】：

【解决方案4】：

这不是你必须制作 100% 的背景，而是你必须制作 100% 的 div，因为有很多方法，

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

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

【讨论】：

【解决方案5】：

首先，您需要在 body 和 html 中添加 height:100%。

body,html{height:100%;}

然后，height:100% 到您选择的 div 将起作用。

like here

祝你好运！！

更新

你想让它像this吗？

或

this?

【讨论】：

我想要jsfiddle.net/7JfV2/3。但是将body,html{height:100%;} 和列高设置为 100%，仍然无法正常工作！可能是与代码冲突的语义用户界面问题！ :(
jsfiddle.net/8bsLg/3 。只需从您的 .computer-wrapper 中删除 min-height: 600px 并使用 @Shibin ragh 方法（使用 vh）。