CSS宽度:100%textarea用于评论(响应)

Question

我的CSS需要一些帮助.

我正在尝试建立评论系统,但它出了问题.

这是我在codepen.io上的DEMO页面

你可以看到有一个用户头像和textarea.max-width:650px;当您减小浏览器宽度时,容器会自动更改.

谁能在这方面帮助我？

HTML

<div class="container">
  <div class="comment">
    <div class="commenter">
      <img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
    </div>
    <div class="comment-text-area">
      <textarea class="textinput" placeholder="Comment"></textarea>
    </div>
  </div>
</div>

CSS

body {
  background-color: #dddddd;
}

.container {
  position: relative;
  max-width: 650px;
  margin: 0px auto;
  margin-top: 50px;
}

.comment {
  background-color: blue;
  float: left;
  width: 100%;
  height: auto;
}

.commenter {
  float: left;
}

.commenter img {
  width: 35px;
  height: 35px;
}

.comment-text-area {
  float: left;
  width:100%;
  height: auto;
  background-color: red;
}

.textinput {
  float:left;
  width: 100%;
  min-height: 35px;
  outline: none;
  resize: none;
  border: 1px solid #f0f0f0;
}

我想这样做:

Answer 1

您可以尝试使用calc();为您执行计算...请记住,您需要为此添加供应商前缀.

body {
  background-color: #dddddd;
}

.container {
  position: relative;
  max-width: 650px;
  margin: 0px auto;
  margin-top: 50px;
}

.comment {
  background-color: blue;
  float: left;
  width: 100%;
  height: auto;
}

.commenter {
  float: left;
}

.commenter img {
  width: 35px;
  height: 35px;
}

.comment-text-area {
  float: right;
  width: calc(100% - 45px);
  height: auto;
  background-color: red;
}

.textinput {
  float:left;
  width: 100%;
  min-height: 35px;
  outline: none;
  resize: none;
  border: 1px solid #f0f0f0;
}

<div class="container">
  <div class="comment">
    <div class="commenter">
      <img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
    </div>
    <div class="comment-text-area">
      <textarea class="textinput" placeholder="Comment"></textarea>
    </div>
  </div>
</div>