Question

#external
{
  background-color: #585858;
  width: 200px;
  height: 200px;
}
#internal
{
  background-color: #111858;
  width: 50px;
  height: 100%;
}

<div id="external">
  content 1
  <div id="internal"></div>
</div>

在这种情况下，如何将外部div的剩余高度设置为内部div？问题是当我将100％高度设置为内部div时，内部高度==外部高度。

Answer 1

您的请求有点不清楚，但flexbox可以做我认为您所追求的内容。

＆＃13;

p {
  margin: 0;
}
.external {
  background-color: rgba(255, 0, 0, 0.5);
  width: 200px;
  height: 200px;
  display: inline-flex;
  flex-direction: column;
  margin: 10px;
}
.internal {
  background-color: #111858;
  100%;
  flex: 1;
}

＆＃13;

<div class="external">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <div class="internal"></div>
</div>
<div class="external">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum quia tempore! Sit, laboriosam, quam.</p>
  <div class="internal"></div>
</div>

＆＃13;

Answer 2

使用这可能有助于你

<style>
    #external
    {
      background-color: #585858;
      width: 200px;
      height: 200px;
    }
    #internal
    {
      background-color: #111858;
      width: 50px;
      height: calc(100% - 20px);
    }
    .content
    {
    height:20px;
    }
</style>

<div id="external">
  <div class="content">content 1</div>
  <div id="internal"></div>
</div>

Div宽度/高度100％的另一个div内的自由空间

2 个答案: