Div высота 100% содержимого

Question

У меня есть простой вопрос для гуру 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> 

И это < стилю >

.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/

Это то, что я вижу сейчас

Хотя это то, что я ожидал иметь:

Минимальная высота составляет 100px. я уже протестирован с высотой: 100%, перелив-у: авто, высота: авто без успеха :(

Спасибо за вашу помощь, Алекс

Answer 1

у вас есть две проблемы, вызывающие проблему у вас есть вопрос клиринговую и а bsolute проблема позиционирования. Внутри .myClass у вас есть два плавающих divs. Только это вызовет проблему. Вы даже попытались исправить это в двух местах. Вы добавили класс clearfix в одном месте (это было бы работать только в том случае, если бы у вас было правильное правило css). У вас также есть пустой div с встроенным стилем clear: both;, хотя для этого вам нужно будет иметь его как третий div в вашей ссылке.

Тем не менее, даже если любой из вышеперечисленных функций работает правильно, проблема не была бы исправлена. Это из-за вашего абсолютного позиционирования на .centered-text. Когда вы абсолютно позиционируете что-то, вы вынимаете его из потока вашего документа. Это означает, что родитель не имеет понятия о том, что внутри него. Все ваши размеры шли от вашего либерального использования min-height: 100px. Если вы удалите абсолютное позиционирование на .centered-text и правильно используйте clearfix, ваш код будет работать нормально.

.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; 
 
}

<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>

Все, что я сделал удалить сказал абсолютное позиционирование (это не делает ничего, что я мог сказать), переместили свой clearfix в нужное место, удалили дополнительный DIV (также попытка clearfix) и добавил класс clearfix в конец вашего css.

Похоже, вы пытались сделать много всего, чтобы этот код работал.Вы можете пройти через и посмотреть, что делает, много похоже, что это ничего не делает.

Answer 2

только добавить переполнение:. Скрытый;

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

Если не установлен высота:.. XXpx; контейнер будет соответствовать содержанию

Answer 3

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

скрипку имеет решение сделано с помощью JQuery с помощью вызова .height() и JavaScript с помощью setInterval вызов. Каждые 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);