Question

我有以下HTML：

<div id="outer">
    <div class="content left"></div>
    <div class="content right">
       <div class="fill">
           <div class="blue">
             xxx <br> xxx
           </div> 
    </div>
</div>

CSS：

 body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; }
.content { position:absolute; width:50%; height:100%; }
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; }
.fill { padding: 2em; background-color: green; height: 100%;}
.blue { background-color: blue; }

Fiddle

如何才能使蓝色DIV上方和下方的空间高度相同？

Answer 1

以下内容对您有用：

.blue { 
  position:absolute;
  top:50%;
  background-color: blue;
}

以下是垂直对齐内容Link

的良好参考

Answer 2

你问这个是因为你没有看到你的期望，或者因为你不知道如何编程吗？我问这个是因为你忘了关闭“填充”DIV。

如果这不是您的问题，请尝试将位置指定为绝对值。

.blue{
    position: absolute;
    background-color: blue;
    padding: 10px;
}

如何在另一个DIV中放置DIV，以便DIV上方及其下方的空间相等？

2 个答案: