Question

我有一些不同高度的div，我想一次显示一个（用visibility: hidden隐藏其他），但同时要确保div下面的内容保持不变的地方。

我有这个小的html片段：

<html>
  <body>
    <div class="container">
      <div class="big box" >Big</div>
      <div class="small box">Small</div>
    </div>
    <div class="footer">Footer</div>
  </body>
</html>

使用这种造型：

.container {
  overflow-y: hidden;
}

.box {
  display: inline-block;
  width: 100px;
  position: absolute;
}

.big {
  height: 100px;
  visibility: inherit;
  background-color: lightgreen;
}

.small {
  height: 40px;
  background-color: lightblue;
}

.footer {
  width: 200px;
  background-color: pink;
}

我的期望是这样的：

+------------+
| Small      |  <-- The text "Big" is hidden by the small
|            |      box because it is rendered behind it.
+------------+
|            |
|            |
+------------+---------+
| Footer               |
+----------------------+

我知道当我使用position: absolute时，它将无效，因为container div无法获得正确的高度，但那又是什么？

JSBIN：http://jsbin.com/xakedogihi/7/edit?html,css,output

Answer 1

您可以使用display:flex和order来交换div的顺序：

＆＃13;

.container {
  display:flex;
}

.box {
  order:1;
  width: 100px;
}

.big {
  order:2;
  height: 100px;
  visibility: hidden;
  background-color: lightgreen;
}

.small {
  height: 40px;
  background-color: lightblue;
}

.footer {
  width: 200px;
  background-color: pink;
}

＆＃13;

<div class="container">
  <div class="big box">Big</div>
  <div class="small box">Small</div>
</div>
<div class="footer">Footer</div>

＆＃13;

这适用于所有现代浏览器

<强>更新

我想我得到了你想要的东西 - 两个div应该坐在彼此之上而不使用绝对定位，所以页脚仍然低于最高内容。

＆＃13;

.container {
  padding-left: 100px;
  /*width of inner boxes*/
  width: 0;
}
.container:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}
.container .box {
  margin-left: -100px;
  /*minus amount of padding above*/
  width: 100px;
}
.container .big {
  float: left;
  background: red;
}
.container .small {
  float: right;
  background: green;
}
.footer {
  background: blue;
}

＆＃13;

<div class="container">
  <div class="big box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et facilisis sapien</div>
  <div class="small box">Small</div>
</div>
<div class="footer">Footer</div>

＆＃13;

Answer 2

将您的html和CSS更改为此

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="big box" >
        <div class="small box">Small</div>
        Big
      </div>

    </div>
    <div class="footer box">Footer</div>
  </body>
</html>


 .container {

}

.box {

  width: 100px;

}

.big {
  height: 100px;
  visibility: inherit;
  background-color: lightgreen;
}

.small {
  height: 40px;
  background-color: lightblue;
}

.footer {
  width: 200px;
  background-color: pink;
}

Answer 3

如果盒子div的高度是硬编码的，就像在这个例子中一样，你可以明确地设置容器div的高度。所以容器的CSS将是：

.container {
  overflow-y: hidden;
  height:100px;
}

如果高度是动态的，我会添加一些在框中循环的javascript以找到最高的javascript并将其应用为容器的高度。这个（使用jQuery）没有经过测试，但通常应该是正确的：

var height = 0;
var container = $('.container');
container.find('.box').each(function(){
    if( $(this).height() > height ){
        height = $(this).height();
    }
});
container.height( height );

Answer 4

您无法在.box中使用绝对位置的原因是.container是静态定位的。＆＃34;绝对＆＃34;相对于最近的定位父级的位置。

不幸的是，如果你放置.container，你可以将它从流程中取出。所以.footer将被放置，好像.container不在那里。最简单的解决方法是放置.container和.footer：

.container {
  overflow-y: hidden;
  postition: abolute;
  left: 0;
  top: 0;
}

.box {
  display: inline-block;
  width: 100px;
  position: absolute;
  left: 0;
  top: 0;
}

.big {
  height: 100px;
  visibility: inherit;
  background-color: lightgreen;
  z-index: 10;
}

.small {
  height: 40px;
  background-color: lightblue;
  z-index: 20;
}

.footer {
  top: 100px;
  width: 200px;
  background-color: pink;
}

Answer 5

我找到了解决方案。它并不优雅，但它有效：

.container {}

.box {
  display: inline-block;
  width: 100px;
}

.big {
  height: 100px;
  background-color: lightgreen;
  visibility: hidden;
  width: 0px;
}

.small {
  height: 40px;
  background-color: lightblue;
}

.footer {
  width: 200px;
  background-color: pink;
}

它解决了我遇到的实际问题，但没有解决我建议解决的问题。抱歉转移！

从最高的孩子做div使用高度

5 个答案: