我有以下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上方和下方的空间相同的高度?

最佳答案

以下应为您工作:

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


这是垂直对齐内容Link的良好参考

关于html - 如何在另一个DIV中放置一个DIV,以使DIV上方和下方的空间相等?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14217015/

10-11 20:29
查看更多