5

The problem is that I have two skinny boxes as in the code below. Both of them have a child paragraph. The first paragraph has some text in it, the second one does not. Again, the problem is that when text is gone any paragraph loses its height, I wanna keep that somehow.

I wanna keep the height of the second paragraph as if there was one line of text (the font-size is defined), how can I do that using CSS ?

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
}
<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>
  • Setting `min-height: 1em` or `1rem`, em/rems are relative to your font size. Just play around to find the correct value. – Eyeslandic Mar 03 '21 at 12:54

5 Answers5

9

Add an empty element inside when it's empty. Works with any font-size

.drunk-container {
   display: flex;
  font-size: 1.2rem;
}

.skinny-box {
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  color: green;
  outline: 1px solid red;
}

p:empty::before {
  content:"";
  display:inline-block;
}
<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

<div class="drunk-container" style="font-size:2rem;">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

Or like below that would support all the cases (even multi line)

.drunk-container {
   display: flex;
  font-size: 1.2rem;
}

.skinny-box {
  width: 300px;
  outline: 1px solid blue;
  display:flex; /* here */
  padding: 10px;
  box-sizing: border-box;
}

p {
  color: green;
  flex-grow:1; /* and here */
  outline: 1px solid red;
}
<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

<div class="drunk-container" style="font-size:2rem;">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

<div class="drunk-container" style="font-size:2rem;">

  <div class="skinny-box">
    <p>Some<br> text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
2

There are a lot of ways of doing this, I would add a min-height to the <p> like so:

p {
    min-height: 22px;
}


.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  min-height: 22px;
  outline: 1px solid red;
}
<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>

To support multi-line <p> I would suggest some JS:

const p1 = document.getElementById('p1');
const p2 = document.getElementById('p2');
p2.style.minHeight = p1.clientHeight + 'px';
.drunk-container {
   display: flex;
}

.skinny-box {
  height: 150px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
}
<div class="drunk-container">

  <div class="skinny-box">
    <p id='p1'>Some<br>mutliline<br>text</p>
  </div>

  <div class="skinny-box">
    <p id='p2'></p>
  </div>
  
</div>
0stone0
  • 34,288
  • 4
  • 39
  • 64
  • How can I calculate the height that is needed for that ? Relative to the font-size ? –  Mar 03 '21 at 12:52
1

Can you please check the below code? Hope it will work for you. You have to add min-height: calc(100% - 30px); to p tag and this 30px value is depend upon total margin of p tag.

Please refer to this link: https://jsfiddle.net/yudizsolutions/qax3egj5/2/

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
  margin: 15px 0;
  min-height: calc(100% - 30px);
}
<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>
Yudiz Solutions
  • 4,216
  • 2
  • 7
  • 21
0

You could simply define a minimum height to your paragraph on the css level like this min-height: 21px; check out the code below and let me know if it helps.

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
  min-height: 21px;
}
<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p></p>
  </div>
  
</div>
mw509
  • 1,957
  • 1
  • 19
  • 25
  • 1
    Yes, It helps., but how can I calculate the height that is needed for that ? Relative to the font-size ? –  Mar 03 '21 at 12:51
  • If the font size is static and not dynamic, then you can always check to see the best height and keep it as that. else if it is static, that is quite a bit more. which one is it? – mw509 Mar 03 '21 at 12:56
-1

How about just adding some dummy "placeholder" text to the second para and making its colour the same as that of your background.

.drunk-container {
   display: flex;
}

.skinny-box {
  height: 70px;
  width: 300px;
  outline: 1px solid blue;
  
  padding: 10px;
  box-sizing: border-box;
}

p {
  font-size: 1.2rem;
  color: green;
  outline: 1px solid red;
}
<div class="drunk-container">

  <div class="skinny-box">
    <p>Some text ... </p>
  </div>

  <div class="skinny-box">
    <p style="color: white;">!</p>
  </div>
  
</div>
MartinJ
  • 333
  • 2
  • 13