Сделать абзац оставшейся высоты

Question

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

У меня есть вертикальная компоновка с четырьмя элементами.

<div class="col-sm-6" style="height: 350px"> 
     <h1>Header Text 1</h1> 
     <h2>Header Text 2</h2> 
     <p>paragraph that should take the remaining space</p>   
     <a href="">Button</a> 
    </div> 

Высота фиксирована и будет достаточно для размещения h1, h2, a. Я хочу, чтобы элемент p взял оставшееся пространство и отобразил как можно больше строк текста в этом пространстве. Если пространства недостаточно, он должен отображать точки ... или некоторый индикатор.

Я попытался установить фиксированную высоту для абзаца, но это не сработало, потому что я не знаю, сколько строк будет h1,h2.

Answer 1

Первая часть вашей проблемы разрешимы прогибается: https://jsbin.com/japojezofa/edit?html,css,output (жаль, что я нахожусь на телефон .. В джунглях .. И переполнение стека не дает мне возможности поставить код здесь)

Однако многострочных эллипсы переменной длиной строки, я думаю, будет невозможно с чистым CSS (может быть, вы можете подделать его с нижним правым выровнена фоновым изображением «...»): Is it possible to use text-overflow:ellipsis on multiline text?

EDIT: Это код

.col-sm-6 { 
    display: flex; 
    flex-direction: column; 
} 

.col-sm-6 > * { 
    flex-basis: auto; 
    flex-shrink: 1; 
} 

p { 
    flex-grow: 1; 
    overflow: hidden; 
} 

Answer 2

Вы можете использовать процент (%, как 95% или что-то другое) для высоты, чем любая высота h1 и h2, процент будет присвоить оставшуюся высоту p.

style="height:95%" 

Answer 3

Как упоминалось в ответе Доминика Тобиаса, flexbox может выполнять регулировку высоты для вас.

div { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
p { 
 
    flex: 1; 
 
    background: lightblue; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-sm-6" style="height: 350px"> 
 
    <h1>Header Text 1</h1> 
 
    <h2>Header Text 2</h2> 
 
    <p>paragraph that should take the remaining space</p> 
 
    <a href="">Button</a> 
 
</div>

Что касается многострочного многоточие он предоставил одну ссылку ... Я предоставлю другим. - Applying an ellipsis to multiline text