箱形阴影不显示和弯曲容器不拉伸

Question

我不确定这是否允许，但我的问题实际上可以分为两个：

1. 底部标题应显示底部阴影，但不是因为背景和z-index（如果我是正确的话）。

2. container应占据剩余可用屏幕高度的100％。如果container right中的内容较长，请同时展开container和container right。 container left应始终保持100％的可用高度，保留在屏幕上，如果内容对于容器而言太长，则显示滚动条。

正如您在下面的情况截图中看到的，目前我无法做到。

如何解决这两个问题？我一直在努力尝试各种解决方案，但它们似乎都没有100％工作。

请注意，存在某种分层顺序：

容器＆gt;页眉+页脚＆gt;侧板＆gt;模态

情况如下：Codepen example

为了简洁起见，我在这里只提供了相关的代码。

HTML：

<div class="header-box-shadow">Header 1</div>
<div class="header-box-shadow">Header 2</div>
<div class="header-box-shadow">Header 3</div>
<div class="header-box-shadow">Header 4</div>
<div class="container">
  <div class="content">
    <div class="left">container left</div>
    <div class="right">container right</div>
  </div>
</div>
<div class="footer">footer</div>

<div class="sidepanel">sidepanel</div>
<div class="modal">modal</div>

SCSS：

.header-box-shadow {
  &:last-of-type {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 100000;
  }
}

.container {     
  display: flex;
  flex-direction: column; 

  .content {
    flex: 1 1 auto;
    display: flex;

    .left {
      height: 100%;
    }
    .right {
      flex: 1 1 auto;
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

.sidepanel {
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
}
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 1

将完整的HTML布局包含在另一个div中，您可以使用display: flex。然后你可以给这个div，让它称之为.outer，100％视口高度。然后，在容器上设置flex: 1; - 这将确保容器伸展并填充剩余的垂直空间。然后，您还可以删除页脚固定位置。接下来，在左侧容器侧设置overflow-y: scroll;。当内容变得太大时，它会滚动。

对于您的方框阴影，:last-of-type将不起作用，因为最后一个div不是父容器中的最后一个类型。因此，在最后一个标题项中添加一个类.last，并将该框阴影应用于该选择器。

在此处进行演示：https://codepen.io/NikxDa/pen/vdZbxV?editors=1100

如果这是你想要达到的结果，请告诉我。

Answer 2

一个问题是我认为last-of-type选择器仅适用于this answer中的节点选择器。

编译你的scss之后有.header-box-shadow:last-of-type {，因为这个类没有用。

因此，如果您为带有阴影的元素创建一个额外的类，它将起作用。

.hasShadow{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 100000;
}