Div高度100％的内容

时间：2015-07-05 22:00:40

标签： html css css3 height

我有一个简单的问题，CSS大师正在破坏我的周末。 基本上我有一个div左边有一个图像，右边有一些文字。 我需要盒子高度与内容文本相同，所以例如在最后一行下面的图像是在盒子外面，而我需要盒子的高度就像内容一样。

我不能使用固定高度，因为文本可以在框内改变，我只需要一个已定义的最小高度。

有些大师可以帮助我吗？

<a href="#" class="myClass">
    <div class="postImageUrl" style="overflow:hidden; z-index: 10; max-width: 100%;">
        <div class="imgUrl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/Lorem-Ipsum.jpg);">
        </div>
    </div>
    <div class="centered-text-area clearfix">
        <div class="centered-text">
            <div class="myClass-content">
                <div class="ctaText" style="float:left;">
                    UpNeXt
                </div>
                <div style="clear:both;"></div>
                <div class="postTitle" style="float:left;">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
                </div>
            </div>
        </div>
    </div>
</a>

这是＆lt; style＆gt; 

.myClass 
, .myClass .postImageUrl 
, .myClass .imgUrl 
, .myClass .centered-text-area {
    min-height: 100px;
    position: relative;
}
.myClass
, .myClass:hover
, .myClass:visited
, .myClass:active {
    border:0!important;
}
.myClass {
    display: block;
    transition: background-color 250ms;
    webkit-transition: background-color 250ms;
    width: 100%;
    opacity: 1;
    transition: opacity 250ms;
    webkit-transition: opacity 250ms;
    background-color: #eaeaea;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
}
.myClass:active
, .myClass:hover {
    opacity: 1;
    transition: opacity 250ms;
    webkit-transition: opacity 250ms;
    background-color: #FFFFFF;
}
.myClass .postImageUrl
, .myClass .imgUrl {
    background-position: center;
    background-size: cover;
    float: left;
    margin: 0;
    padding: 0;
}
.myClass .postImageUrl {
    width: 30%;
}
.myClass .imgUrl {
    width: 100%;
}
.myClass .centered-text-area {
    float: right;
    width: 70%;
}
.myClass .centered-text {
    display: table;
    min-height: 100px;
    left: 0;
    position: absolute;
    top: 0;
}
.myClass .myClass-content {
    display: table-cell;
    margin: 0;
    padding: 0 74px 0 18px;
    position: relative;
    vertical-align: middle;
    width: 100%;
}
.myClass .ctaText {
    border-bottom: 0 solid #fff;
    color: #34495E;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .125em;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}
.myClass .postTitle {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}
.myClass .ctaButton {
    background-color: #FFFFFF;
    margin-left: 10px;
    position: absolute;
    right: 0;
    top: 0;
}
.myClass:hover .imgUrl {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.myClass .imgUrl {
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    -moz-transition: -moz-transform 0.4s ease-in-out;
    -o-transition: -o-transform 0.4s ease-in-out;
    -ms-transition: -ms-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}

您可以在此处找到问题http://jsfiddle.net/L26s1vc5/

这就是我现在看到的 enter image description here

虽然这是我期望的： enter image description here

最小高度为100px。 我已经测试过高度：100％，溢出-y：自动，高度：自动没有成功:(

感谢您的帮助，Alex。

3 个答案:

答案 0 :(得分：4)

您有两个导致问题的问题。您有清算问题和绝对定位问题。在.myClass里面你有两个漂浮的div。仅这一点就会导致你遇到的问题。你甚至试图在两个地方修复它。您在一个地方添加了一个clearfix类（只有在您有匹配的css规则时才有效）。你还有一个空的div，其内联样式为clear: both;，但为了实现这一点，你需要将它作为链接中的第三个div。

尽管如此，即使上述任何一项工作正常，问题也不会得到解决。这是因为你在.centered-text上的绝对定位。当你绝对定位某些东西时，你会从文档的流程中取出它。这意味着它的父母不知道其中的内容的大小。您的所有规模都来自您对min-height: 100px的自由使用。如果删除.centered-text上的绝对定位并正确使用clearfix，那么您的代码就可以正常工作。

＆＃13;
＆＃13; 
.myClass,
.myClass .postImageUrl,
.myClass .imgUrl,
.myClass .centered-text-area {
  min-height: 100px;
  position: relative;
}
.myClass,
.myClass:hover,
.myClass:visited,
.myClass:active {
  border: 0!important;
}
.myClass {
  display: block;
  transition: background-color 250ms;
  webkit-transition: background-color 250ms;
  width: 100%;
  opacity: 1;
  transition: opacity 250ms;
  webkit-transition: opacity 250ms;
  background-color: #eaeaea;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
}
.myClass:active,
.myClass:hover {
  opacity: 1;
  transition: opacity 250ms;
  webkit-transition: opacity 250ms;
  background-color: #FFFFFF;
}
.myClass .postImageUrl,
.myClass .imgUrl {
  background-position: center;
  background-size: cover;
  float: left;
  margin: 0;
  padding: 0;
}
.myClass .postImageUrl {
  width: 30%;
}
.myClass .imgUrl {
  width: 100%;
}
.myClass .centered-text-area {
  float: right;
  width: 70%;
}
.myClass .centered-text {
  display: table;
  min-height: 100px;
  /* Removed absolute positioning*/
}
.myClass .myClass-content {
  display: table-cell;
  margin: 0;
  padding: 0 74px 0 18px;
  position: relative;
  vertical-align: middle;
  width: 100%;
}
.myClass .ctaText {
  border-bottom: 0 solid #fff;
  color: #34495E;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .125em;
  margin: 0;
  padding: 0;
  text-decoration: underline;
}
.myClass .postTitle {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
.myClass .ctaButton {
  background-color: #FFFFFF;
  margin-left: 10px;
  position: absolute;
  right: 0;
  top: 0;
}
.myClass:hover .imgUrl {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.myClass .imgUrl {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  -moz-transition: -moz-transform 0.4s ease-in-out;
  -o-transition: -o-transform 0.4s ease-in-out;
  -ms-transition: -ms-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

/* Added clearfix class here so that it can work properly*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
＆＃13; 
<a href="#" class="myClass clearfix"><<!-- moved clearfix here so it can take effect for the necessary area -->>
  <div class="postImageUrl" style="overflow:hidden; z-index: 10; max-width: 100%;">
    <div class="imgUrl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/Lorem-Ipsum.jpg);">
    </div>
  </div>
  <div class="centered-text-area">
    <div class="centered-text">
      <div class="myClass-content">
        <div class="ctaText" style="float:left;">
          UpNeXt
        </div>
        <div class="postTitle" style="float:left;">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat
        </div>
      </div>
    </div>
  </div>
</a>
＆＃13;
＆＃13;
＆＃13;

我所做的一切都删除了绝对定位（它没有做任何我能说的事情），将你的clearfix移动到正确的位置，删除你的额外div（也是一个clearfix尝试）并添加了一个clearfix类到你的css结束了。

看起来您已尝试做很多事情来使这段代码正常工作。你可能想要了解一下做什么，很多看起来都没有做任何事情。

答案 1 :(得分：1)

https://jsfiddle.net/dixalex/ojoevj1k/

小提琴通过jQuery使用.height（）调用和使用setInterval调用的JavaScript完成解决方案。每50毫秒，该函数将检查图像高度是否与具有文本的容器的高度相同。如果它们的像素高度不相等，则直接应用CSS使它们相等。

由于这是动态的，我不必更改任何CSS。

var makeSameHeight = setInterval( function() {
    var currentTextHeight = $('div.myClass-content').height() + "px";
    var imgDivHeight = $('div.imgUrl').height() + "px";
    if (currentTextHeight === imgDivHeight)
    {
        var doNothing = "";
    } else {
        $('div.imgUrl, div.postImageUrl, a.myClass').css("height", currentTextHeight);
    }
}, 50);

答案 2 :(得分：0)

仅添加溢出：隐藏; 

.myClass .myClass-content {
    display: table-cell;
    margin: 0;
    padding: 0 74px 0 18px;
    position: relative;
    vertical-align: middle;
    width: 100%;
    overflow:hidden;
}

如果未设置高度：XXpx; ，则容器将适合内容。

相关问题
最新问题