html - CSS 宽度 :100% textarea for comment (responsive)

Question

我的 CSS 几乎不需要帮助。

我正在尝试制作一个评论系统，但它出了点问题。

这是我的 DEMO来自 codepen.io

的页面

可以看到有用户头像和文字框。容器 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>