1

I am trying to work out a CSS3 only resolution to this question.

I have a variable-height <p> within a fixed-size <div> and have not been able to have the <p> element fill the free space within the div. If there were no special effects associated with each div, I could set the background-color of both elements to the same color, but that is not currently an option.

What I have attempted so far (and rejected):

  • Giving the <p> element a height of 100% and the <div> element an overflow of auto. On the html side, every div had a scrollbar and a lot of extra space appeared.
  • Setting the background-color of both elements to the same color, but when I added a div:hover block, the background color did not fill the whole div (because as the screenshot shows, the p element does not fill the container in most cases.
  • Assigning the same :hover block to both div and p, but the transition effect did not apply to the entire div.

In any case, my attempts seemed very "hacky" and I hope there is a clean way to have the p element fill the div element.

This is a screenshot of my latest iteration.

P element does not fill available space in div element

This is the CSS code.

.RadioEpisodeItemContainer
{
    display: inline-block;
    vertical-align: top;
    width: 20em;
    height: 12em;
    overflow: hidden;
    border: 2px solid white;
    border-radius: 10px;
    margin: 0.5em;
}

.RadioEpisodeItem
{
    border-radius: 8px;
    background-color: tan;
    margin: 0em;
    padding: 1em;
}

This is a subsample of the rendered HTML: 

<div class="RadioEpisodeItemContainer">
    <p class="RadioEpisodeItem">
        <strong>Date: </strong>5/02/2009<strong> – Episode: </strong>Intro<br />
        <a href="#" class="mp3_track" data-location="../Radio_Show_Files/INTRO.mp3" title="Episode Intro: About SpecialNeeds Lifestyles">
            Play</a><br />
        <strong>Description: </strong>About SpecialNeeds Lifestyles</p>
</div>
<div class="RadioEpisodeItemContainer">
    <p class="RadioEpisodeItem">
        <strong>Date: </strong>3/15/2012<strong> – Episode: </strong>098<br />
        <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0107.mp3" title="Episode 098: Hospice. Guest: Susan Howard (Carondelet Hospice) and Corinne Spalding">
            Play</a><br />
        <strong>Description: </strong>Hospice. Guest: Susan Howard (Carondelet Hospice)
        and Corinne Spalding</p>
</div>
<div class="RadioEpisodeItemContainer">
    <p class="RadioEpisodeItem">
        <strong>Date: </strong>2/19/2012<strong> – Episode: </strong>097<br />
        <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0106.mp3" title="Episode 097: Handi-Dogs. Guest:Veronica">
            Play</a><br />
        <strong>Description: </strong>Handi-Dogs. Guest:Veronica</p>
</div>
<div class="RadioEpisodeItemContainer">
    <p class="RadioEpisodeItem">
        <strong>Date: </strong>2/12/2012<strong> – Episode: </strong>096<br />
        <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0105.mp3" title="Episode 096: Guest: Mary Mallone">
            Play</a><br />
        <strong>Description: </strong>Guest: Mary Mallone</p>
</div>
<div class="RadioEpisodeItemContainer">
    <p class="RadioEpisodeItem">
        <strong>Date: </strong>2/05/2012<strong> – Episode: </strong>095<br />
        <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0104.mp3" title="Episode 095: Mastering a Healthy Self Image. Guest: Darrel Knock">
            Play</a><br />
        <strong>Description: </strong>Mastering a Healthy Self Image. Guest: Darrel Knock</p>
</div>
<div class="RadioEpisodeItemContainer">
    <p class="RadioEpisodeItem">
        <strong>Date: </strong>1/22/2012<strong> – Episode: </strong>094<br />
        <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0103.mp3" title="Episode 094: The Special Needs Store. Guest: Kelly Savage">
            Play</a><br />
        <strong>Description: </strong>The Special Needs Store. Guest: Kelly Savage</p>
</div>
<div class="RadioEpisodeItemContainer">
    <p class="RadioEpisodeItem">
        <strong>Date: </strong>1/15/2012<strong> – Episode: </strong>093<br />
        <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0102.mp3" title="Episode 093: Music therapy for people with autism. Guest: Jackie Burger">
            Play</a><br />
        <strong>Description: </strong>Music therapy for people with autism. Guest: Jackie
        Burger</p>
</div>

In summary, how can I have the p element fill the available space in the div element?

  • 1
    I may not understand here. What is stopping you from setting the height of the `

    ` to the height of the `

    ` as an exact value (optionally setting an `overflow` value on the div)?
     – EyasSH May 10 '15 at 18:20
  • Why are you styling `p` elements with background color? That should be avoided cause there's almost never a good reason to. (specially if you leave *context* element out of *layout* elements design). So my shortest answer: style `p` only and eventually with the desired vertical margin. Style DIV with everything else: background, paddings etc etc – Roko C. Buljan May 10 '15 at 18:20
  • 1
    EyasSH: Nothing was stopping me. I just didn't think of it. That did the trick. Roko: I styled the p element with a background color just to show that the p element wasn't filling the entire div. –  May 10 '15 at 18:23
  • @Rubix_Revenge I want to say that a *content* element should never fill nothing. Although it obviously *can*. `p` being a block-level element simply set it to `height: 100%`; – Roko C. Buljan May 10 '15 at 18:27
  • one question, do you want the whole div to be filled with evenly spread text? – Ashesh May 10 '15 at 18:32
  • That would be nice. The content is variable in size, but I don't know how to visually address that aspect. The content is what it is. –  May 10 '15 at 18:36
  • that will look strange. http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container – Ashesh May 10 '15 at 18:44
  • That's a good point. I think I'll leave it as-is for now unless the client requests something different. –  May 10 '15 at 18:49
  • @Rolo: Now that I have better understanding, I agree with your points. I learned from this. –  May 10 '15 at 21:48

2 Answers2

1

Just add display: block; height: 100%; to the .RadioEpisodeItem and it will work.

JSFiddle: Preview

brance
  • 1,157
  • 9
  • 22
1

This is very simple, just add height: 100% on the class responsible for your paragraph styling. In this case, RadioEpisodeItem

body {
  background-color: #4094cf;
}
.RadioEpisodeItemContainer {
  display: inline-block;
  vertical-align: top;
  width: 20em;
  height: 12em;
  overflow: hidden;
  border: 2px solid black;
  border-radius: 10px;
  margin: 0.5em;
}
.RadioEpisodeItem {
  height: 100%;
  border-radius: 8px;
  background-color: tan;
  margin: 0em;
  padding: 1em;
}
<div class="RadioEpisodeItemContainer">
  <p class="RadioEpisodeItem">
    <strong>Date: </strong>5/02/2009<strong> – Episode: </strong>Intro
    <br />
    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/INTRO.mp3" title="Episode Intro: About SpecialNeeds Lifestyles">
            Play</a>
    <br />
    <strong>Description: </strong>About SpecialNeeds Lifestyles</p>
</div>
<div class="RadioEpisodeItemContainer">
  <p class="RadioEpisodeItem">
    <strong>Date: </strong>3/15/2012<strong> – Episode: </strong>098
    <br />
    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0107.mp3" title="Episode 098: Hospice. Guest: Susan Howard (Carondelet Hospice) and Corinne Spalding">
            Play</a>
    <br />
    <strong>Description: </strong>Hospice. Guest: Susan Howard (Carondelet Hospice) and Corinne Spalding</p>
</div>
<div class="RadioEpisodeItemContainer">
  <p class="RadioEpisodeItem">
    <strong>Date: </strong>2/19/2012<strong> – Episode: </strong>097
    <br />
    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0106.mp3" title="Episode 097: Handi-Dogs. Guest:Veronica">
            Play</a>
    <br />
    <strong>Description: </strong>Handi-Dogs. Guest:Veronica</p>
</div>
<div class="RadioEpisodeItemContainer">
  <p class="RadioEpisodeItem">
    <strong>Date: </strong>2/12/2012<strong> – Episode: </strong>096
    <br />
    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0105.mp3" title="Episode 096: Guest: Mary Mallone">
            Play</a>
    <br />
    <strong>Description: </strong>Guest: Mary Mallone</p>
</div>
<div class="RadioEpisodeItemContainer">
  <p class="RadioEpisodeItem">
    <strong>Date: </strong>2/05/2012<strong> – Episode: </strong>095
    <br />
    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0104.mp3" title="Episode 095: Mastering a Healthy Self Image. Guest: Darrel Knock">
            Play</a>
    <br />
    <strong>Description: </strong>Mastering a Healthy Self Image. Guest: Darrel Knock</p>
</div>
<div class="RadioEpisodeItemContainer">
  <p class="RadioEpisodeItem">
    <strong>Date: </strong>1/22/2012<strong> – Episode: </strong>094
    <br />
    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0103.mp3" title="Episode 094: The Special Needs Store. Guest: Kelly Savage">
            Play</a>
    <br />
    <strong>Description: </strong>The Special Needs Store. Guest: Kelly Savage</p>
</div>
<div class="RadioEpisodeItemContainer">
  <p class="RadioEpisodeItem">
    <strong>Date: </strong>1/15/2012<strong> – Episode: </strong>093
    <br />
    <a href="#" class="mp3_track" data-location="../Radio_Show_Files/Show0102.mp3" title="Episode 093: Music therapy for people with autism. Guest: Jackie Burger">
            Play</a>
    <br />
    <strong>Description: </strong>Music therapy for people with autism. Guest: Jackie Burger
  </p>
</div>
Ashesh
  • 3,499
  • 1
  • 27
  • 44