Box-shadow 不显示且 flex 容器不拉伸答案

【问题标题】：Box-shadow not displaying and flex container not stretchingBox-shadow 不显示且 flex 容器不拉伸
【发布时间】：2018-02-13 18:41:29
【问题描述】：

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

底部标题应显示底部框阴影，但不是因为背景和 z-index（如果我是正确的）。
container 应占据剩余可用屏幕高度的 100%。如果container right 中的内容较长，则同时拉伸container 和container right。 container left 应始终为 100% 剩余可用高度，留在屏幕上，如果内容对于容器来说太长，则显示滚动条。

正如你在下面的情况截图中看到的，目前我也做不到。

如何解决这两个问题？我一直在尝试各种解决方案，但似乎都没有 100% 有效。

请注意，有一定的分层顺序：

容器 > 页眉 + 页脚 > 侧面板 > 模态

情况如下：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%);
}

【问题讨论】：

你的问题不清楚。请更新，以便我们更好地理解。
试图让我的问题更清楚@AniruddhAgarwal，有帮助吗？
经过深思熟虑后，我决定删除我的答案。由于固定定位的footer 和sidepanel 似乎具有动态高度/宽度，因此您需要一个脚本来使它们与您的Flexbox 布局一起播放。如果可以设置它们的高度/宽度，则可以使用 CSS 解决方案。
根据下面答案中的评论，我假设您想要一个粘性footer，对吗？ ...如果您解释 sidepanel 与其余部分的关系，我将发布正确的答案。
是的，页脚确实很粘。侧面板是一个幻灯片，因此唯一的要求是它在调用时出现在除模式之外的所有内容之上。对于定位等，这已经处理好了。

标签： html css sass flexbox

【解决方案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

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

【讨论】：

您的解决方案很接近，非常感谢您迄今为止所做的工作。然而;如果 container right 的内容超过 100%/100vh，页脚仍应位于页面底部。
我认为这对于 flexbox 是不可行的。您可以尝试使用 CSS Grid。

【解决方案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;
}

【讨论】：