Make paragraph take the remaining height

Question

Most questions and answers about taking remaining height are focused on the content section on the page. I've tried several answers to my scenario but couldn't solve it.

I have a vertical layout with four elements.

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

The height is fixed and will be enough to accommodate h1,h2,a. I want p element to take the remaining space and display as may lines of text as possible in that space. If space is not enough it should display dots ... or some indicator.

I tried to set a fixed height for the paragraph but that doesn't work because I don't know how many lines h1,h2 will take.

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

The first part of your problem is solvable with flex: https://jsbin.com/japojezofa/edit?html,css,output (sorry I'm on a phone.. In a jungle.. And stack overflow doesn't give me options to put code here)

However multi-line ellipses of a variable line length I think will be impossible with pure css (maybe you can fake it with a bottom-right aligned background image of "..."): Is it possible to use text-overflow:ellipsis on multiline text?

EDIT: This is the code

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

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

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

edited May 23 '17 at 11:45

Community

1
1

answered Feb 07 '16 at 06:34

Dominic

62,658
20
139
163

heres an example of the webkit mentioned on your second link (unfortunately do not works on mozilla): [link](http://codepen.io/martinwolf/pen/qlFdp) – L777 Feb 07 '16 at 18:57
1

@Dominic Tobias Thanks! You nailed it. I'll add the working code to the answer, hope you don't mind ;) – rareyesdev Feb 07 '16 at 19:39

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

As mentioned in Dominic Tobias' answer, flexbox can do the height adjustment for you.

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>

As for the multi-line ellipsis he has provided one link...I will provide another. - Applying an ellipsis to multiline text

edited May 23 '17 at 12:07

Community

1
1

answered Feb 07 '16 at 12:23

Paulie_D

107,962
13
142
161

Thanks! I tried your code but it doesn't work when paragraph gets several lines. Take a look at [this demo](https://jsbin.com/yujehecubo/edit?html,css,output) – rareyesdev Feb 07 '16 at 19:36
As mentioned in both answers you can't do the ellipsis with multi line text. – Paulie_D Feb 07 '16 at 19:43
I meant the height adjustment not the ellipsis. As you can see in [this demo](https://jsbin.com/yujehecubo/edit?html,css,output) the paragraph's height is not constrained by the height of the `div`. Even the button is pushed outside the div – rareyesdev Feb 07 '16 at 19:52
If the text is larger than the divs remaining space that's expected. You need to find an alternative method of dealing with the overflow. - http://codepen.io/Paulie-D/pen/ZQqZoz – Paulie_D Feb 07 '16 at 20:15
Using `overflow-y: auto` solves the overflow issue, well done. The question asks to hide the end of the paragraph if it doesn't fit but scrolling could be another approach. Thanks for your answer! +1 – rareyesdev Feb 07 '16 at 20:48

score 0 · Answer 3 · answered Feb 07 '16 at 05:26

0

You can use percentage(% like 95% or something) for height then whatever height h1 and h2 takes, percentage will assign the remaining height to p.

style="height:95%"

answered Feb 07 '16 at 05:26

pritesh

533
4
15

This is not a math problem! – Peyman Mohamadpour Feb 07 '16 at 05:31
Actually,u can use % for height. Try that out. – pritesh Feb 07 '16 at 05:34
1

Actually he is not after the solution for a summation problem. He needs a dynamic CSS solution, in which he can end up with the height for `p`, regardless of any information about `h1`, ... heights – Peyman Mohamadpour Feb 07 '16 at 05:36
@pritesh I cannot use percent based height because I don't know the height of `h1`,`h2`. If I use something like 50% I might waste space when `h1` height is small or use to much space when it gets bigger. Thanks @Trix for explaining – rareyesdev Feb 07 '16 at 05:41

Make paragraph take the remaining height

3 Answers3