Question

我正在尝试使用css根据窗口大小设置textarea元素的高度。问题是，如果我使用height进行设置，那么在一台显示器上查看它就足够了，但在另一台显示器上则不会。例如：

textarea {
    resize: none;
    margin: 5px 10px 5px 10px;
    border-radius: 8px;
    height: 900px;
}

这可以仅使用CSS来实现，还是JS的工作？

修改

我的目标是让2个textarea元素彼此相邻，它们之间的距离很小，距离底部/顶部的距离很小（边缘边缘）。两个元素应该几乎具有窗口大小的高度，这在使用height: 100%;后不会产生。

指向的链接 jsfiddle，其中height: 100%;没有做到这一点。

＆＃13;

/* Commented out because of background img
body {
	background-image: url(./images/background.jpg);
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
*/

.btn-group button {
  background: #DF6C6C;
  border-color: transparent;
  color: white;
  padding: 10px 24px;
  cursor: pointer;
  float: left;
  outline: 0px !important;
  -webkit-appearance: none;
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #E58B8B;
}


/* Align buttons */

.wrapper {
  text-align: center;
}

textarea {
  resize: none;
  margin: 5px 10px 5px 10px;
  border-radius: 8px;
  outline: 0px !important;
  -webkit-appearance: none;
  height: 100%;
}

＆＃13;

<body>
  <div class="wrapper">
    <div class="btn-group">
      <button>Button1</button>
      <button>Button2</button>
      <button>Button3</button>
      <button>Button4</button>
      <button>Button5</button>
      <button>Button6</button>
    </div>
  </div>
  <textarea></textarea>
</body>

＆＃13;

Answer 1

也许有些事情要开始，我使用了带绿色边框的包装，这样你就可以看到发生了什么。

你可能（我的假设）不想要100％身高，但“剩余100％身高”这里还有其他答案，例如https://stackoverflow.com/a/11226029/125981

.btn-group button {
  background: #DF6C6C;
  border-color: transparent;
  color: white;
  padding: 10px 24px;
  cursor: pointer;
  float: left;
  outline: 0px !important;
  -webkit-appearance: none;
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #E58B8B;
}


/* Align buttons */

.wrapper {
  text-align: center;
}

.txtcontainer {
  border: solid lime 1px;
  text-align: center;
  height: 140px;
  padding-top: 5%;
  padding-bottom: 5%;
}

.spacer {
  width: 5%;
}

.myfunones{
  resize: none;
  border-radius: 8px;
  outline: 0px !important;
  -webkit-appearance: none;
  height: 100%;
  width: 45%;
}

<body>
  <div class="wrapper">
    <div class="btn-group">
      <button>Button1</button>
      <button>Button2</button>
      <button>Button3</button>
      <button>Button4</button>
      <button>Button5</button>
      <button>Button6</button>
    </div>
  </div>
  <div class='txtcontainer'>
    <textarea class='myfunones'>text</textarea><span class='spacer'>&nbsp;</span><textarea class='myfunones'>text2</textarea>
  </div>
</body>

Answer 2

而不是900px的固定宽度，将其设置为100%，因此其父级/容器的高度变为100%。

textarea {
  resize: none;
  margin: 5px 10px 5px 10px;
  border-radius: 8px;
  height: 100%;
}

如果要设置浏览器窗口本身的高度（视口高度），请使用100vh：

textarea {
  resize: none;
  margin: 5px 10px 5px 10px;
  border-radius: 8px;
  height: 100vh;
}

示例：我删除了所有样式，以便textarea覆盖父母＆＃39;高度和宽度。

＆＃13;
＆＃13;
.container { height: 200px; background: steelblue; } textarea { resize: none; height: 100%; width: 100%; margin: 0; border: none; overflow: auto; -webkit-box-shadow: none; -moz-box-shadow: none; border-radius: 0; background: rgba(255, 255, 255, 0.5); } textarea:focus, textarea:active { outline: none; }
＆＃13;
<h1>Text field</h1> <div class="container"> <textarea></textarea> </div>
＆＃13;
＆＃13;
＆＃13;

更新，根据要求提供2个textareas：

这次我用flex来分配两个textareas之间的空间和空间。我在容器上应用了边距，以便在不使textareas变大或变小的情况下轻松调整。

＆＃13;
＆＃13;
.container { display: flex; flex-direction: row; justify-content: space-between; align-content: center; height: 200px; background: steelblue; margin: 20px; } textarea { flex: 0 1 48%; height: 100%; margin: 0; border: none; overflow: auto; resize: none; -webkit-box-shadow: none; -moz-box-shadow: none; border-radius: 0; background: rgba(255, 255, 255, 0.5); } textarea:focus, textarea:active { outline: none; }
＆＃13;
<h1>Text field</h1> <div class="container"> <textarea></textarea> <textarea></textarea> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

寻找这样的东西？

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-areas: ". .";
  grid-template-rows: 100% 100%;
  grid-gap: 10px;
  background-color: #09ff00;
  padding: 10px 0;
}

.left,
.right {
  resize: none;
  border-radius: 8px;
}

＆＃13;

<div class="container">
  <textarea class="left"></textarea>
  <textarea class="right"></textarea>
</div>

＆＃13;

根据窗口大小设置textarea元素高度

3 个答案: