Question

我使用两个div来创建双色背景的外观。在我的容器div后面，左边是蓝色，右边是黄色。我对这些列div的css是：

#bluecol{
height:100%;
background-color: #5C8AE6;
display: inline;
float: none;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
width: 50%;
z-index: -5;}

并且黄色是相同的，除了定位在右边，自然。目前这两个div工作正常，但我不能让它们匹配我容器内容的高度，我只能手动设置高度或100％，这只占用浏览器的窗口。我的容器设置为高度：max-content因此在这种情况下无用。

我希望两个列div匹配容器高度。任何建议都会很棒！

Js fiddle：https://jsfiddle.net/ak0kp9xd/

Answer 1

请尝试以下操作： Demo

html, body {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#bluecol {
    height:100%;
    background-color: #5C8AE6;
    display: inline;
    float: none;
    left: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    top: 0px;
    width: 50%;
    z-index: -5;
}
#yellowcol {
    height:100%;
    background-color: rgb(255, 204, 0);
    display: inline;
    float: none;
    right:0px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    top: 0px;
    width: 50%;
    z-index: -5;
}
#container {
    background-color:#E5ECFB;
    font-family:'calibri';
    margin:10px;
    overflow:hidden;
    z-index:5;
    font-size:medium;
    height: 100%;
}

Answer 2

你的背景块必须在#container内才能达到它的高度。

您还可以使用:before来减少HTML标记：

#container {
  position: relative;
  background-color: rgb(255, 204, 0);
  padding: 10px;
}
#container:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #5C8AE6;
  display: block;
  z-index: 1;
}
#container .content {
  position: relative;
  z-index: 10;
  background-color: #E5ECFB;
  border-right: 11px solid #FFE994;
  border-left: 11px solid #AFC6F3;
}

<div id="container">
  <div class="content">Whatever</div>
</div>

作为背景的列不会展开以匹配页面高度

2 个答案: