同时调整多个元素的大小

Question

我正在尝试创建一个带有工具栏的 "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（前面的那个）调整大小时，两个文本区域应该同时调整大小（并且 layer1 在最终版本中可能不是文本区域）。

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

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

Answer 1

你所有的文本区域都有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>

我没有测试，但像这样的东西可以完成这项工作。

Answer 2

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

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

您 post 中的要求并非 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 似乎总是在调整大小时），但由于这个问题几乎是逐字逐句的，所以我对 , I'll let you work out the kinks in it. I highly recommend taking a look at the 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 来恭敬地操纵 textareas，但它有点过头了，并且与纯 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>

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

同时调整多个元素的大小

Resize several elements simultaneously

html

javascript

css

resize