同时调整多个元素的大小

Question

我正在尝试使用工具栏创建一个“textarea”，以显示基于存储在背景中 textarea 上的 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 （前面的那个）的大小时，应该同时调整两个 textarea 的大小（并且layer1在最终版本中可能不是 textarea）。

此外，如果我水平调整 textarea 的大小，导航栏也应该拉伸，以跟踪 textarea 的新维度。

任何人都知道如何做到这一点？ 这是否需要一些 javascript 代码，还是只需要 css 就足够了？

Answer 1

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

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

您帖子中的要求不是 100% 明确，但据我了解：

当一个textarea调整大小时，另一个与toolbar一起调整大小。

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

有了这个，文本区域并排显示，当我想要一个在另一个之上时......

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

---

下面是一个最小的纯 CSS 示例，它将让您朝着正确的方向前进。 它有问题（在调整大小时似乎总是使用textarea ），但由于这个问题几乎是逐字逐句的，我对你之前问题的回答，我会让你解决其中的问题。 我强烈建议您查看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>

我祝你在未来的努力中好运。

Answer 2

你所有的 textarea 都有position: absolute ，所以我认为它没有用。

试试这个flex ：

 .primary-content { position: relative; z-index: 0; height: 480px; width: 640px; }.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: relative; 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: 100%; height: 100%; resize: both; } #layer1 { z-index: 1; height: 100%; } #layer2 { z-index: 2; height: 100%; }.flex{ display: flex; flex-direction: row; justify-content: space-between; }.insideTextArea{ width: "50%" }

 <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> <div class="flex"> <textarea id="layer1" class="insideTextArea"></textarea> <textarea id="layer2" class="insideTextArea"></textarea> </div> </div>

我不测试，但这样的事情可以完成这项工作。