如何根据父元素调整文本区域的大小

Question

所以我需要调整此表单中文本区域的大小，以根据父元素 (#wrapper) 获取框中的全部可用内容 space。我该怎么做？

当我确定有多少文本会去那里时，我会更精确地计算负数。

我写的计算代码，计算textarea的高度为0px

var boxHeight = ($("#wrapper").height()-200);

$( window ).ready(function(){
    $("#Box").height( boxHeight );
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XxX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
 <div id="wrapper">
  <h1 class="alignCenter"> Hello </h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta egestas urna ac lobortis. Nam bibendum purus sagittis odio fermentum dapibus. Praesent venenatis justo eget hendrerit finibus. Sed rutrum eget lacus a pulvinar. Nulla sit amet faucibus ligula. Curabitur eget nunc finibus, pharetra libero vitae, eleifend sapien. Ut porttitor vehicula arcu, non porttitor tellus faucibus ut.</p>
  <form class="form" id="Form">
   <p class="text">
    <textarea name="text" id="Box" placeholder="Xyz"></textarea>
   </p>
   <div class="g-recaptcha" data-sitekey="6Lec2wYTAAAAAOL3DSuOJaSKO8Fk-6lM-VBSCWOx"></div>
   <div class="alignCenter">
    <button class="brown" type="submit">Save</button>
    <button class="purple" type="submit">Publish</button>
   </div>
  </form>
 </div>
</body>
</html>

Answer 1

您可以单独使用 CSS 轻松完成此操作：

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

Answer 2

如果您知道 #wrapper 将具有指定的高度，您可以使用 CSS 来合理地适合文本区域。

首先，在 #wrapper 规则中指定高度值。

然后，通过使用绝对定位和CSS calc 函数将表单设置为父项的高度减去200px。[=20] 为#Form 设置高度。 =]

然后您需要对包裹文本区域的 p 元素执行类似的技巧，为按钮留出 50 像素的高度。

最后，为#Box设置高度和宽度为100%，并设置box-sizing: border-box以考虑textarea元素的边框。

评论：虽然这可以做到，但该方法取决于表单前文本高度和按钮高度的两个硬编码值。 JavaScript/jQuery 可能是更好的方法。无论哪种方式，#wrapper 都需要一个高度值。

#wrapper {
    border: 1px dotted blue;
    height: 500px;
    position: relative;
}
#Form {
    border: 1px dotted blue;
    height: calc(100% - 200px);
    position: absolute;
    width: 100%;
    bottom: 0;
}
#Form p {
    border: 1px dashed blue;
    height: calc(100% - 50px);
    margin: 0;
}
#Box {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

<div id="wrapper">
     <h1 class="alignCenter"> Hello </h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta egestas urna ac lobortis. Nam bibendum purus sagittis odio fermentum dapibus. Praesent venenatis justo eget hendrerit finibus. Sed rutrum eget lacus a pulvinar. Nulla sit amet faucibus ligula. Curabitur eget nunc finibus, pharetra libero vitae, eleifend sapien. Ut porttitor vehicula arcu, non porttitor tellus faucibus ut.</p>
    <form class="form" id="Form">
        <p class="text">
            <textarea name="text" id="Box" placeholder="Xyz"></textarea>
        </p>
        <div class="g-recaptcha" data-sitekey="6Lec2wYTAAAAAOL3DSuOJaSKO8Fk-6lM-VBSCWOx"></div>
        <div class="alignCenter">
            <button class="brown" type="submit">Save</button>
            <button class="purple" type="submit">Publish</button>
        </div>
    </form>
</div>

如何根据父元素调整文本区域的大小

How to resize textarea depending on the parent element

html

javascript

css

jquery

textarea