基于两个内部容器的较大容器设置容器高度

Question

我有一个容器div，它有两个内部div。内部div在外部容器上的display:block/none上切换hover，因此在任何给定时间只能看到一个内部。

外部容器有min-height，但可以根据内部内容进行扩展。如果两个内部内容都短于min-height，那么一切都运行良好。但是，如果其中一个内部容器高于min-height，我会在悬停时跳过外部容器的高度。

我想要的是：

• 如果两个内部容器都较短，则外部容器会保留其min-height。
• 外部容器的高度为两个内部容器的高度IF，哪一个高于min-height
• 任何时候悬停都不会发生扩展/崩溃。

示例HTML：

<div class="outer">
    <div class="inner inner1">Inner 1 Green</div>
    <div class="inner inner2">Inner 2 Blue</div>
</div>
<div class="after">Some text afterwards</div>

示例CSS：

.outer {
    position:relative;
    width: 300px;
    min-height: 150px;
    background: red;
    padding: 10px
}

.inner {
    width: 200px;
}

.inner1 {
    background: green;
    height: 200px
}

.inner2 {
    background: blue;
    height: 100px;
    display: none;
}

.outer:hover .inner1 {
    display: none;
}
.outer:hover .inner2 {
    display: block;
}

示例小提琴：http://jsfiddle.net/ZhS6c/

重要提示：我正在寻找纯CSS解决方案。我可以使用jQuery或基本JS轻松解决这个问题，但这不是一个选项。

Answer 1

不要通过将display设置为none来隐藏元素，而是将margin-left设置为较大的负数，使它们远离屏幕的左侧。这样，如果你浮动两个.inner并添加一个clearfix（或者更好，在display: hiddden上设置.outer），容器将始终是最高的子元素。

在代码中：

.inner {
    width: 200px;
    float: left;
}

.inner1 {
    background: green;
    height: 200px
}

.inner2 {
    background: blue;
    height: 100px;
    margin-left: -1000px;
}

.outer:hover .inner1 {
    margin-left: -1000px;
}
.outer:hover .inner2 {
    margin-left: 0;
}

然后，在容器上有两个解决方案：clearfix（http://jsfiddle.net/ZhS6c/3/）

.outer:after{
    content: "";
    display: block;
    clear: left;
}

和阻止格式化上下文强制（http://jsfiddle.net/ZhS6c/2/）

.outer{
    visible: hidden;
}

方法二

还有不同的方法，例如，您可以通过将其宽度缩小为零来隐藏不需要的元素。执行此操作时（当然还有所有浮动内容）也会将overflow设置为hidden，否则内容仍然可见。实例：http://jsfiddle.net/ZhS6c/4/。

不浮动

如果您不喜欢那里的浮动，您可以尝试inline-block方法，并像以前一样设置宽度。实例：http://jsfiddle.net/ZhS6c/5/。此解决方案还需要对HTML代码进行一点编辑，因为如果在两个.inner之间放置一个空格，它将实际呈现（尝试删除示例中的注释以查看会发生什么）。

Answer 2

试试这个。使用display和visibility的组合：

案例1： .inner1始终大于.inner2

.inner1 {
    display:inline-block;
    background: green;
    height: 200px
}

.inner2 {
    background: blue;
    height: 100px;
    display: none;
}
.outer:hover .inner1 {
    visibility:hidden; /*sets visiblity instead of display to maintain height;*/
    width:1px;  /*reduces width to 1px for adjustment."width:0px" will not work. */
}
.outer:hover .inner2 {
    /* Below two lines for .inner2 div to be on same line*/
    display: inline-block; 
    float:left; 
}

See this Demo Fiddle with .inner1 height = 200px

即使你增加.inner1的高度，容器也会相应地调整高度：

See this Demo Fiddle with .inner1 height = 300px

---

或

---

案例2： .inner2可能大于.inner1

See this Demo Fiddle .inner2 > .inner1

为上述小提琴所做的改变：

.inner2 {
    position:relative;
    right:4px;
    background: blue;
    height: 400px;
    display: none;
}
.outer:hover .inner2 {
    /* Below two lines for .inner2 div to be on same line*/
    display: inline-block; 
    vertical-align:top;
}

回应评论：Container gets taller div height in the beginning itself

Answer 3

如果边距技巧不起作用，则另一个选项是使用display: table，然后使用width: 0和visibility: hidden的组合折叠不显示的选项。这两个项目将形成一行中具有较高高度的单元格，而零宽度可防止它以其他方式影响页面布局。

Answer 4

也许玩不透明可以帮助 Here's a fiddle

我所做的一切都是

.outer:hover .inner1 {
    opacity:0;
}
.outer:hover .inner2 {
    display: block;
    position:absolute;
    top:10px;
}

我将inner2置于绝对值，因此它位于顶部，因此给它一个10px的上边距（导致父容器的填充）

Answer 5

.outer:hover .inner1 {
    visibility: hidden;
}

尝试使用visibility。

Answer 6

从外部移除最小高度，让高度由最高内部div确定

.outer {
position:relative;
width: 300px;
min-height: 150px;   !!!! remove this 
background: red;
padding: 10px
}