Question

我有这样的事情：

<div class="block">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias illo, magni dolores animi at rem laboriosam quisquam vitae voluptatibus possimus officia dolore nobis. Aspernatur, perspiciatis nobis ipsum et ullam adipisci.
    </div>
    <div class="textarea"><textarea name="" cols="30" rows="10"></textarea></div>
</div>

CSS：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.block {
    background: #eee;
    padding: 10px;
    width: 500px;
    height: 500px;
}

.textarea {
    height: 100%;
}

.textarea textarea {
    width: 100%;
    height: 100%;
}

您可以在此处看到它的外观：http://jsfiddle.net/u6kdp3yk/

是否可以在没有JS的情况下仅使用CSS使.textarea部分100％的父块高度但没有.text部分的高度？ .text部分高度是动态的，取决于内容长度。

Answer 1

根据compatibility 的要求，您可以随时使用弹性框模型，如下所示：

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.block {
  background: #eee;
  padding: 10px;
  width: 500px;
  height: 500px;
  
  display:flex;
  flex-direction: column;
}
textarea {
  width: 100%;
  
  flex:1;
}

＆＃13;

<div class="block">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias illo, magni dolores animi at rem laboriosam quisquam vitae voluptatibus possimus officia dolore nobis. Aspernatur, perspiciatis nobis ipsum et ullam adipisci.
  </p>
  <textarea name="" cols="30" rows="10"></textarea>
</div>

＆＃13;

我也略微更改了HTML标记 - 这些更改纯粹是为了更好的语义：如果需要，可以将其更改回来。

父块的100％高度减去上面的内容？

1 个答案: