文本区域高度的自动缩放

Question

我正在尝试显示双列布局。在左栏中有一张图片，可以显示为 30% 或可用宽度但不超过 300px。在右栏中有一个跨越浏览器其余宽度的描述。

我不知道 a priori 描述有多长，我想限制描述字段的高度所以我使用 textarea 启用滚动如果需要。

这是我当前的 HTML 代码：

<div class="tile-panel">
    <div class="tile-preview-panel">
        <img class="tile-img" src="{{ thumbnail_url }}">
    </div>
    <div class="tile-desc-panel">
        <textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
    </div>
</div>

还有我的CSS：

.tile-panel {
      width: 100%;
      overflow: auto;
}
.tile-preview-panel {
      width: 30%;
      float:left;
      max-width: 300px;
}
.tile-desc-panel {
      overflow: hidden;
}
.tile-img {
      width: 100%;
}
.tile-description {
      resize: none;
      background-color:inherit !important;
      width: 100%;
}
.tile-description[readonly] {
      cursor: default; !important;
}

唯一剩下的位是 textarea 的高度。我希望它始终是 tile-preview-panel 的高度，而不管浏览器的宽度如何。这可以用纯 CSS 实现吗？

Answer 1

我会为此使用 javascript

放在前面

<script>

function sameheight(){
var divHeight = document.getElementById('DIV ID YOU WANT TO GET HEIGHT OF').style.height;
document.getElementById('DIV ID YOU WANT THE SAME SIZE').style.height = divHeight;
}
</script>

然后穿在身上

<body onload="sameheight()">

Answer 2

这是一个开始，这个使用您现有的文本区域，

.tile-panel {
  display: table;
  width: 100%;
}
.tile-preview-panel {
  display: table-cell;
  width: 30%;
}
.tile-desc-panel {
  display: table-cell;
  position: relative;
}
.tile-img {
  width: 100%;
}
.tile-description {
  resize: none;
  background-color:inherit !important;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left: 0;
  top: 0;
  position: absolute;
  }
.tile-description[readonly] {
  cursor: default; !important;
}

@media (min-width: 1000px){
  .tile-preview-panel {
    width: 300px;
  }
}

<div class="tile-panel">
    <div class="tile-preview-panel">
        <img class="tile-img" src="http://lorempixel.com/300/300/sports/1/">
    </div>
    <div class="tile-desc-panel">
        <textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
    </div>
</div>

这里是使用 div 的版本，因此您可以为文本设置更多样式，使用链接等。

.tile-panel {
  display: table;
  width: 100%;
}
.tile-preview-panel {
  display: table-cell;
  width: 30%;
  padding-right: 5px;
}
.tile-desc-panel {
  display: table-cell;
  position: relative;
  background-color: #ddd;
  border: 1px solid #999;
}
.tile-img {
  width: 100%;
  vertical-align: top;
}
.tile-description {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  overflow: auto;
  padding-left: 10px;
}

@media (min-width: 1000px) {
  .tile-preview-panel {
    width: 300px;
  }
}

<div class="tile-panel">
  <div class="tile-preview-panel"><img class="tile-img" src="http://lorempixel.com/300/300/nature/5/"></div>
  <div class="tile-desc-panel">
    <div class="tile-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

也可以使用 flex，尽管它对浏览器的支持略少。

.container {
  display: flex;
  width: 100%;
}
.pic {
  flex: 0 0 20%;
  max-width: 200px;
  padding-right: 10px;
}
.text {
  flex: 1;
  position: relative;
  overflow: auto;
  background-color: #ddd;
  border: 1px solid #999;
}
.pic img {
  width: 100%;
  vertical-align: top;
}
.text div {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  padding-left: 10px;
}

<div class="container">
  <div class="pic">
  <img src="http://lorempixel.com/300/300/nature/1/">
  </div>
  <div class="text">
    <div class="tile-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Answer 3

这应该有效：

.tile-panel {
    width: 100%;
    position: relative;
}
.tile-preview-panel {
    position: relative; 
    width: 74%;
}
.tile-desc-panel {
    position: absolute; 
    top: 0;
    right:0;
    bottom:0; 
    margin-left: 1.5%; 
    width: 24.5%; 
    height: 100%; 
    background: #232323; 
    overflow: hidden;
}
.tile-img {
      width: 100%;
}
.tile-description {
      resize: none;
      background-color:inherit !important;
      width: 100%;
}
.tile-description[readonly] {
      cursor: default; !important;
}

textarea {
  border: none;
  }

<div class="tile-panel">
    <div class="tile-preview-panel">
        <img class="tile-img" src="http://placehold.it/640x260">
    </div>
    <div class="tile-desc-panel">
        <textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
    </div>
</div>

Answer 4

@user1899614 建议使用 javascript 的另一种变体，但使用 ES6 和 getBoundingClientRect() 方法：

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

  document.querySelectorAll(someTextareaSelector)[0].style.height = 
    document.querySelectorAll(someParentElementSelector)[0]
    .getBoundingClientRect().height + "px"

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)

文本区域高度的自动缩放

Automatic scaling of textarea height

html

css

css-float