CSS - 显示动态高度的浮动 DIV - 背景图丢失

Question

我的目标:

我想要实现的是，我们在页面上有一些类别列表，但是这个列表的数量是未知的。描述的长度也可能各不相同，但我们希望整个页面看起来统一。因此，我们使用dotdotdot插件在段落中添加省略号。当你将鼠标悬停在项目上时，应该会展开说明并显示完整的文本。

我希望悬停的内容能够浮动或覆盖下面的任何内容。由于我的布局中存在某些项（请参见下面的说明），我的sccontainer元素没有设置高度。它是根据内容动态调整的，但有一个最大高度。

当我在悬停事件中将高度更改为AUTO时（这会导致文本向下流动并显示所有内容），我会失去sccontainer元素的背景。

一些相关的CSS：

  .sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
  .sccontainer .parent { position: absolute; width: 270px; }
  .sccontainer .image { margin: 5px; float: left; }
    .sccontainer .image img { width: 48px; }
  .sccontainer .icon { margin: 0; }
  .sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
  .sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
    .sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
  .sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
  .sccontainer a:hover { text-decoration: underline; }

.sccontainer.hover { height: 250px; }
  .sccontainer.hover .content { height: auto; }
    .sccontainer.hover .content p { min-height: 135px; max-height: none; }

jsFiddle:

这是我目前拥有的jsFiddle版本。如果你将鼠标悬停在蓝色框中的文本上，你就可以看到它的实际效果。由于它有点大，所以我使用了jsFiddle而不是将所有的组件放在代码标签里...

http://jsfiddle.net/ztMM5/1/

下面这张图片是我想要看到的模型图。5a方法会稍微扩展以显示完整内容，但它将覆盖红线。其他项目都不会发生变化。

注意：对不起，事情有点大。我已经尽量缩小了它的大小。另外，我正在修改一个现有的企业内部网站...它是第三方的，因此我对源代码的控制有限 - 因此使用了表格...:(

我尝试过/研究过的：

我认为问题出在sccontainer项浮动，并且没有指定高度。这就是为什么图片消失的原因。

我有一个版本保留了背景...但sccontainer框没有像我们需要的那样调整大小...文本只是溢出了它...相当丑陋。

我对CSS不够熟悉，无法使所有东西都正常工作。如果需要，我不反对使用jQuery进行更多操作。

我确实尝试过一种版本，大部分使用:hover来处理...但它并没有像jQuery方法那样有效。

- Eric Burdo

---

你必须使用表格吗？ - JFK

不幸的是，是的。这都是来自供应商生成的代码的一部分。我可以附加类，并调整sccontainer div内的所有内容。这就是修改HTML方面的全部内容。 - Eric Burdo

Answer 1

这个答案可能不能解决你的具体问题，但它可能会帮助其他遇到类似情况的人（在处理表格时，往往难以呈现清晰的布局）。我之前也遇到过这个问题，以下是我的解决方法。基本上依赖于HTML嵌套

结构来实现内容的可扩展性，同时不影响附近元素的浮动布局：

<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->

    <div class="sccontainer"><!--position relative-->
        <div class="inner"><!--position absolute-->
            <div class="content"><!--position relative-->
                <!-- my content here -->
            </div>
        </div> 
    </div>
    <!-- more containers etc-->

</div><!--END wrapper-->

首先，我们要对#wrapper容器应用臭名昭著的清除浮动技巧（使用您偏爱的方法）:

.cf:after {
    visibility:hidden;
    display:block;
    content:"";
    clear:both;
    height:0
}
* html .cf {
    zoom:1
}
/* IE6 */
 *:first-child+html .cf {
    zoom:1
}

然后是 .sccontainer 容器的样式：

.sccontainer {
    width: 280px; /* or whatever - could be % for responsiveness */
    padding-bottom:200px; /* any value to give height without using height ;) */
    position: relative;
    float: left;
    margin: 5px 10px; /* or whatever */
    overflow: hidden; /* this is important to keep all same height and big content out of sight */
    z-index: 1; /* this is important too, see later */
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}

然后是 .inner 容器，如果我们 hover 元素，它实际上会帮助保持布局的顺序。

.inner {
    position: absolute; /* please don't move */
    width: 100%; /* to fill the whole parent container */
    height: 100%; /* same */
}

并且内容：

.content {
    position: relative;
    background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
    width: 100%; /* helps to fill the gaps with small content */
    height: 100%; /* same, specially if using image backgrounds */
    /* other styles, etc */
}

注意：我们应该对三个容器应用相同的border-radius属性，并为了一致性，对.sccontainer和.content应用box-shadow。

现在，当我们悬停时会发生什么？

.sccontainer:hover {
    overflow: visible; /* show the full content */
    z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}

.sccontainer:hover .content {
    height: auto; /* as it really is, including background image */
}

注意：无论内容的 height 是否小于父容器的 height，此效果都将发生。如果您正在使用边框和阴影（可能显示为父容器内的较小框），则可能不喜欢该效果，因此我们可以向.sccontainer添加一个额外的类。

<div class="sccontainer withhover">

仅在存在该类时应用hover效果，例如：

.sccontainer.withhover:hover {
    overflow: visible;
    z-index: 999;
}

...并使用一些jQuery来删除那个类别以适应较短的内容，这样它就不会受到影响：

jQuery(document).ready(function ($) {
    $(".sccontainer").hover(function () {
        var $contentHeight = $(this).find(".content").height();
        if ($(this).innerHeight() > $contentHeight) {
            $(this).removeClass("withhover");
        }
    });
});

请看 JSFIDDLE。

- JFK

---

感谢@JFK。有了你提供的东西，我能够完成90%的工作...我选择暂时不加阴影和圆角...如果用户真的需要它们，我们可以重新开始。修改第三方代码总是很麻烦的... - Eric Burdo