Looking for a solution using purely CSS3 for this issue.
The challenge lies in having a variable-height <p> within a fixed-size <div>, and making sure that the <p> element fills up the remaining space within the div. While setting the background-color of both elements to match is one way, it's not feasible due to special effects associated with each div.
My previous attempts:
- Tried giving the
<p>element a height of 100% and the<div>element an overflow of auto. However, this resulted in excessive white space and scrollbars on every div in the HTML view. - Experimented with matching the background-colors of both elements, but encountered issues when applying a hover effect - it didn't cover the entire div as the screenshot demonstrates.
- Also tried assigning the same :hover block to both div and p, but the transition effect wasn't applied uniformly across the div.
All my attempts felt like "hacks", and I'm seeking a cleaner way to achieve the desired outcome of filling the div with the p element.
Here is a snapshot of the latest design iteration.
Below is the corresponding CSS code snippet.
.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;
}
Here's a sample section of the generated 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>
<!-- more similar divs follow -->
In conclusion, any suggestions on how to make the p element fill the available space in the div?