Сделать div expand, чтобы занять доступную высоту родительского контейнера

Ответ 1

В зависимости от поддержки браузера вы можете использовать flex.

Контейнер должен:

display: flex;
flex-flow: column;

Вот быстрая демонстрация с примером разметки:

http://jsbin.com/xuwina/3/edit?html,css,output

Ответ 2

Посмотрите на это

http://jsfiddle.net/v8Lhxk2v/4/

играя с border-bottom и overflow:hidden в родительском элементе.

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
    border-bottom: 22px solid #cecece;
    overflow: hidden;
}

.tile h3{
    min-height: 25px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    margin: 0 10px;
}

Ответ 3

Я бы сказал, попробуйте поместить содержимое в абзац внизу. В этом случае вы можете установить пространство, в котором должно заканчиваться содержимое. Тем не менее вам нужно добавить дополнительный класс к своему контенту с меньшим заголовком, чтобы он был больше, чем другой фрагмент с более крупным заголовком.

Ваш HTML будет выглядеть следующим образом:

<div class="tile">
    <h3>short</h3>
    <!-- Added an extra class to the div -->
    <div class="content small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

В вашем CSS я изменил это:

.tile .content{
    height: 162px;
    background-color:grey;
    overflow: hidden;
    margin: 0 10px;
    position: absolute;
    bottom:30px;
}
.tile .small{height:216px;}

И тогда вы получите этот результат: JSFIDDLE

Сообщите мне, если это решение, которое работает для вас.

Ответ 4

Решение этой проблемы довольно просто с flexbox.

Создав контейнер гибкого столбца, элементы гибкости стек вертикально. Затем вы можете применить flex: 1 к текстовому полю (.content), что позволит расширить всю доступную высоту контейнера.

HTML

<div id="container"><!-- container to align .tile boxes in flexbox row; 
                         (this flexbox is optional) -->
    <div class="tile">
        <h3>short</h3>
        <div class="content">Lorem ipsum dolor sit amet ... </div>
    </div>

    <div class="tile">
        <h3>longLongLong longLongLong longLongLong</h3>
        <div class="content">Lorem ipsum dolor sit amet ... </div>
    </div>

</div><!-- end #container -->

CSS

#container {
    display: flex; /* establish flex container; 
                      aligns flex items (child elements) in a row by default; */        
}   

.tile {
    display: flex; /* establish (nested) flex container */
    flex-direction: column; /* override default row alignment */
    height: 300px;
    width: 200px;
    background: #cecece;
    /* float: left; */
    margin: 0 10px 0 0;
}

.tile h3 {
    min-height: 20px;
    max-height: 61px;
    /* display: inline-block; */
    overflow: hidden;
}

.tile .content {
    flex: 1; /* tells flex item to use all available vertical space in container */
    height: 162px;
    overflow: hidden;
    margin: 0 10px 40px 10px; /* added bottom margin for spacing from container edge */
}

DEMO

Обратите внимание, что flexbox поддерживается всеми основными браузерами, за исключением IE 8 и 9. В некоторых последних версиях браузера, таких как Safari 8 и IE10, требуется префиксы поставщика. Чтобы быстро добавить все префиксы, которые вам нужны, используйте Autoprefixer. Дополнительные сведения о совместимости браузера в этом ответе.

Использование эллипса (...)

Если вы хотите применить многоточие к одной строке текста, CSS делает это с легкостью с помощью свойства text-overflow. Это все еще немного сложно (из-за всех требований), но text-overflow делает это возможным и надежным.

Если, однако, вы хотите использовать многоточие в многострочном тексте – как это было бы здесь. то не ожидайте веселья. CSS не предоставляет отдельного свойства для этого, и обходные решения попадают и промахиваются. Подробнее и методы см. В моем ответе здесь: Применение эллипса к многострочному тексту

Ответ 5

Ну, довольно легко... сделайте <div class="move"></div> и поместите свой h3 в него, как стиль :<div class="move"><h3>Short</h3></div> now, который перемещает div так:

.move{height:100px;}

он работает, все готово:)

PS: сделайте это с обоими вашими h3s:)

ну, есть код:

CSS

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
}

.tile h3{
    min-height: 20px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    height: 162px;
    overflow: hidden;
    margin: 0 10px;
}

.move{height:100px;}

HTML:

<div class="tile">
    <div class="move">
    <h3>short</h3>
        </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tile">
    <div class="move">
    <h3>longLongLong longLongLong longLongLong</h3>
        </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Ответ 6

Я бы попробовал еще один подход. Используя jquery, вы можете вычислить при загрузке окна height самого высокого h3, а затем примените эту высоту ко всем вашим h3 внутри вашего tiles.

Я знаю, что вы попросили чистое решение css, так что это нормально, если я не получу никакого кредита, но я думаю, что этот ответ может быть полезен для других пользователей с той же проблемой, поэтому я написал это.

Что-то вроде этого:

var maxHeight = -1;
$('.tile h3').each(function() {
    if ($(this).height() > maxHeight)
        maxHeight = $(this).height();
});
$('.tile h3').each(function() {
    $(this).height(maxHeight);
});

Как вы можете видеть в этом JSFIDDLE (уведомление я удалил фиксированный max-height, который вы добавили в заголовок и добавить третий tile с "очень длинным текстом", чтобы вы могли лучше проверить exmaple.

Ответ 7

Попробуйте использовать дополнительные div с оберткой. Теги h3 и div.content обернуты дополнительным div, а некоторые css будут изменены следующим образом:

.tile > div {
  height: calc(100% - 20px);
  margin: 10px;
  overflow: hidden;
  line-height: 22px!important;
}
.tile {
  height: 300px;
  width: 200px;
  background: #cecece;
  float: left;
  margin: 0 10px 0 0;
}
.tile h3 {
  min-height: 20px;
  display: inline-block;
  overflow: hidden;
  margin: 5px 0;
}
.tile .content {
  margin: 0;
}

<div class="tile">
  <div>
    <h3>short</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

<div class="tile">
  <div>
    <h3>longLongLong longLongLong longLongLong</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

Ответ 8

Как насчет фиксированной высоты:

.tile h3 {
    height: 65px;
    display: inline-block;
    overflow: hidden;
}

Или сопровождается js (jQuery):

// Height handler
var headHeight = 0;

// Iterate throug all H3s an get highest
jQuery( 'h3' ).each( function() {

    // Get current height
    var currentHeight = jQuery( this ).height();

    // If higher as handler set as handler
    if( currentHeight > headHeight ) {
        headHeight = currentHeight;   
    }

} );

// Set the height of all H3s
jQuery( 'h3' ).css( 'height', headHeight );

Это будет довольно надежное решение...

Ответ 9

вы можете решить с помощью модуля flexbox Flexible Box Layout:

.tile{
   ...
   /* add the following line */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   ...
}

http://jsfiddle.net/57yLgxsx/

Этот пример работает в Chrome, вы можете проверить совместимость браузера на caniuse.com  а затем добавьте правильные префиксы.

Это зависит от того, кого вы хотите обеспечить совместимость (последние 2 версии всех браузеров, мобильных или настольных компьютеров или обоих).

помните, что существуют две версии flexbox, "старый" и "новый". То, что я написал выше, является новым.

Эта ссылка может прояснить некоторые идеи https://css-tricks.com/snippets/css/a-guide-to-flexbox/