如何使内部 div 边框扩展到外部 div

Question

我一直被这个 HTML/CSS 问题困扰，我什至无法开始弄清楚我将如何构建代码，并且想知道是否有人可以提供帮助。我真的不需要代码，但更需要一种方法和结构的想法。

到目前为止我有这个

+--------------------+
|       Outer div    |
|                    |
|                    |
|                    |
|+------------------+|
||  inner div       ||
||                  ||
|+------------------+|
+--------------------+

外部 div 没有样式，它只是一个容器。 内部 div 有围绕它的样式来给它一个边框和填充来推入它的内容。 内层 div 的边框也与外层 div 内联，以上仅作说明。

当我单击内部 div 中的某些内容时，我希望内部 div 的边框展开并填充到顶部和外部 div，如下所示：

+--------------------+
|+------------------+|
||    Outer div.    ||
||                  ||
||                  ||
||                  ||
||                  ||
||  inner div       ||
||                  ||
|+------------------+|
+--------------------+

内部 div 的垂直位置没有改变，但它周围的边框被向上推到顶部，这样边框看起来就在外部 div 周围，就好像它现在是一个 div。

我的一个想法是让边框成为一个绝对定位的 div，它可以在展开时将其 top 设置为 0，并在正常时设置为内部 div 的顶部，但因为它是 absolute 我不知道如何让它的 top 与布局中的内部 div 对齐。

您将如何构建前后的 html/css。触发器暂时不重要。

谢谢

更新：

• 外部 div 可以包含其他元素，可能是 div 本身
• 外层div没有固定高度，随所有内容一起增长

Answer 1

对于较旧的浏览器（不支持网格），这可能是一种解决方案（填充/位置值只是用于查看内容周围空间的示例）

.outer {
  background: yellow;
  position: relative;
  padding: 10px;
}

.inner {
  position: relative;
}

.inner:before {
  content: '';
  border: 1px solid red;
  position: absolute;
  bottom: -10px;
  left: -10px;
  right: -10px;
  top: -10px;
}

.inner:focus {
  outline: 0;
  position: static;
}

.inner:focus:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,0,0,.1);
}

<div class="outer">
  <p>Dolor sit amet...</p>
  <p>Dolor sit amet...</p>
  <div class="inner" tabindex="-1">
    lorem ipsum...
  </div>
</div>

对于现代浏览器，您可以使用网格和一个额外的元素作为边框：

.outer {
  background: yellow;
  display: grid;
  grid-template: 'upper' 1fr
                 'lower' auto / 100%;
}

.upper-content {
  grid-area: upper;
  padding: 10px;
}

.lower-content {
  grid-area: lower;
  padding: 10px;
  outline: 0;
  cursor: pointer;
}

.border {
  pointer-events: none;
  grid-area: lower;
  border: 1px solid red;
}

.lower-content:focus + .border {
  background: rgba(255,0,0,.1);
  grid-row-start: 1;
}

<div class="outer">
  <div class="upper-content">
    <p>Dolor sit amet...</p>
    <p>Dolor sit amet...</p>
  </div>
  <div class="lower-content" tabindex="-1">
    lorem ipsum...
  </div>
  <div class="border"></div>
</div>

不幸的是，您无法为这些解决方案制作动画（或者不那么容易：/）