Question

因此，我需要调整此表单中的textarea大小，以根据父元素（#wrapper）获取框中的整个可用空间。我该怎么做？

当我确定会有多少文字出现时，我会更确切地说负数计算。

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

＆＃13;

var boxHeight = ($("#wrapper").height()-200);

$( window ).ready(function(){
    $("#Box").height( boxHeight );
});

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

Answer 2

如果您知道#wrapper将具有指定的高度，则使用CSS来合理地拟合textarea。

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

然后，使用绝对定位和CSS #Form函数设置calc的高度，将窗体设置为父级的高度减去200px。

然后你需要对包裹textarea的p元素做一个类似的技巧，为按钮留下50px的高度。

最后，将#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>

如何根据父元素调整textarea的大小

2 个答案: