javascript - 同时调整多个元素的大小

Question

我正在尝试创建一个带有工具栏的“文本区域”，以根据存储在背景文本区域中的 html 内容显示富文本内容。 html 就是这样:

    <div class="primary-content">
        <div class="textarea-with-nav" id="outerWrap">
            <div class="navbar">
                <ul>
                    <li><a href="#">teste1</a></li>
                    <li><a href="#">teste2</a></li>
                    <li><a href="#">teste3</a></li>
                </ul>
            </div>
            <textarea id="layer1"></textarea>
        <textarea id="layer2"></textarea>
        </div>
    </div>

现在的 css 样式看起来像这样:

html, body {
    margin: 0;
    height: 100%;
}
.primary-content {
    padding-top: 55px;
}
.navbar {
    grid-area: header;
    overflow: hidden;
    background-color: #333;
    width: 100%;
        z-index: 1;
}
.navbar.site-nav {
    position: fixed;
    top: 0;
}
.navbar ul { list-style-type: none; }
.navbar ul li { display: inline; }
.navbar ul li a {
    color: white;
    padding: 8px 16px;
    text-decoration: none;
}
.navbar ul li a:hover {
    background-color: #555;
    color: white;
    height: 100%;
}
.textarea-with-nav {
        transform: translate(50%);
    width: 400px;
    height: 300px;
    position: realtive;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.textarea-with-nav > .navbar {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.textarea-with-nav > textarea {
    border: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 396px !important;
    height: 246px !important;
    resize: none;
}
.textarea-with-nav > textarea:focus { outline: none; }

#outerWrap {
position: relative;
z-index: 0;
}

#layer1 {
position: absolute;
z-index: 1;
}

#layer2 {
position: absolute;
z-index: 2;
}

当 layer2(前面的那个)调整大小时，两个文本区域应该同时调整大小(而 layer1 在这个最终版本中可能不是文本区域).

此外，如果我水平调整文本区域的大小，导航栏也应该拉伸(stretch)，以跟踪文本区域的新维度。

有人知道怎么实现吗？这需要一些 javascript 代码，还是只需要 css 就足够了？

Answer 1

据我了解，您的最终目标是:

• 创建富文本框编辑器。
  • 有两个 textarea 元素
  • 使用一个工具栏。
    • 我们将不再假设这实际上是一个 nav-bar。

您帖子中的要求不是 100% 清楚，但据我了解:

When one textarea resizes, the other does to, along with the toolbar.

我唯一的假设是基于您对另一个答案的评论:

With this, the textareas are shown side by side, when I want one on top of the other...

我假设仅调整 textarea 的宽度会影响另一个而不是高度。

---

下面是一个最简单的纯 CSS 示例，可让您朝着正确的方向前进。它有问题(使用 textarea 似乎总是在调整大小时)，但由于这个问题几乎是逐字逐句的，所以我对 your previous question 的回答，我会让你解决其中的问题。我强烈建议您查看 CSS calc function .

/* Rich Text Editor */
.rich-text-editor {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-width: 300px;
	background-color: #ccca;
	padding: 15px;
}
.rich-text-editor > .toolbar {
	list-style-type: none;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #f33;
	background: -webkit-linear-gradient(to right, #f33, #f77);
	background: linear-gradient(to right, #f33, #f77);
	padding: 5px 6px;
}
.rich-text-editor > .toolbar > li {
	display: inline-block;
	color: #fff;
	margin: 0 5px;
	padding: 5px;
	width: 15px;
	border: 1px solid #fff5;
	text-align: center;
	cursor: pointer;
	user-select: none;
	border-radius: 5px;
	transition: 0.3s linear all;
}
.rich-text-editor > .toolbar > li:hover {
	background-color: #fff5;
}
.rich-text-editor > textarea {
	width: 100%;
	border: 1px solid #ccc;
	border-top: none;
	padding: 5px;
}

/* Your Navbar */
.navbar {
	grid-area: header;
	overflow: hidden;
	background-color: #333;
	width: 100%;
        z-index: 1;
}
.navbar.site-nav {
	position: fixed;
	top: 0;
}
.navbar ul { list-style-type: none; }
.navbar ul li { display: inline; }
.navbar ul li a {
	color: white;
	padding: 8px 16px;
	text-decoration: none;
}
.navbar ul li a:hover {
	background-color: #555;
	color: white;
	height: 100%;
}

/* Just for Demonstration */
html, body {
	margin: 0;
	height: 100%;
}
.primary-content {
	height: calc(100% - 50px);
	display: flex;
	align-items: center;
	justify-content: center;
}

<div class="navbar site-nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Edit</a></li>
	</ul>
</div>
<div class="primary-content">
	<div id="rte-test" class="rich-text-editor">
		<ul class="toolbar">
			<li>H</li>
			<li>=</li>
			<li>/</li>
			<li>_</li>
		</ul>
		<textarea></textarea>
		<textarea></textarea>
	</div>
</div>

也有使用 JavaScript 来操作 textarea 的选项，但它有点过头了，并且有与纯 CSS 版本相同的问题:

var richTextEditor = document.getElementById("rte-test");
var oldWidth = 0;
function resize(index, altIndex) {
	var textAreas = richTextEditor.getElementsByTagName("TEXTAREA");
	var width = textAreas[index].clientWidth;
	if (oldWidth !== width) {
		textAreas[altIndex].style.width = width + "px";
		oldWidth = width;
	}
}

.rich-text-editor {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

<div id="rte-test" class="rich-text-editor">
		<textarea onmouseup="resize(0, 1);"></textarea>
		<textarea onmouseup="resize(1, 0);"></textarea>
</div>

祝你在未来的工作中好运。