如何使用可变大小<p>填充固定大小的<div>？

时间：2015-05-10 18:18:01

标签： html css css3

我正在尝试解决此问题的 CSS3 解决方案。

我在固定大小<p>内有一个可变高度<div>，并且无法让<p>元素填充div中的可用空间。如果没有与每个div相关的特殊效果，我可以将两个元素的背景颜色设置为相同的颜色，但目前不是一个选项。

到目前为止我尝试过（并拒绝）：

  • 赋予<p>元素100％的高度，<div>元素溢出auto。在HTML方面，每个div都有一个滚动条，并且出现了很多额外的空间。
  • 将两个元素的背景颜色设置为相同的颜色，但是当我添加div：hover块时，背景颜色没有填充整个div（因为截图显示，p元素没有填充容器在大多数情况下。
  • 分配相同：将鼠标滑块分配给div和p，但过渡效果不适用于整个div。

在任何情况下，我的尝试似乎非常＆＃34; hacky＆＃34;我希望有一个干净的方法让p元素填充div元素。

这是我最新版本的截图。

P element does not fill available space in div element

这是CSS代码。 

.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;
}

这是呈现的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>

总之，如何让p元素填充div元素中的可用空间？

2 个答案:

答案 0 :(得分：1)

只需将show code添加到.RadioEpisodeItem即可。

JSFiddle：Preview

答案 1 :(得分：1)

这很简单，只需在负责段落样式的类上添加height: 100%即可。在这种情况下，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>

相关问题
最新问题