将内部 div 拉伸到屏幕的全高和溢出的内容

Question

我正在努力完成一项看似简单的任务。

在宽屏上，网站应显示 2 列：侧面菜单和内容栏
在较小的屏幕上，网页应显示单列，菜单现在位于底部
内容应呈现在固定宽度的居中列中
内容栏的背景颜色必须始终为全屏高度，无论该栏中的内容大小如何

我对最后一点有疑问。

在宽屏幕上，如果您向下滚动下方，您会注意到绿色列的背景没有传播到底部：

在较小的屏幕上同样的问题：

代码片段

      html,
      body {
        height: 100%;
        color: white;
        margin: 0px;
        padding: 0px;
      }

      .c1 {
        background-color: rebeccapurple;
      }
      .c2 {
        background-color: rosybrown;
      }
      .c3 {
        background-color: seagreen;
      }

      .box {
        display: flex;
        flex-direction: row;
        height: 100%;
      }

      .sidebar {
        height: 100%;
        min-width: 300px;
        /* float: left; */
        order: 1;

        /* position: sticky;
        left: 0;
        top: 0; */

        overflow-y: auto;
      }

      .content {
        height: 100%;
        flex-grow: 1;
        order: 2;
        overflow-x: auto;
          overflow-y: scrollbar;

        align-content: center;
        justify-content: center;
      }

      @media (max-width: 576px) {
        .box {
          flex-direction: column;
          /* display: block; */
        }

        .content {
          width: 100%;
          height: calc(100% - 80px);
          order: 1;

          overflow-y: auto;
        }

        .sidebar {
          width: 100%;
          order: 2;
          height: 80px;

          position: sticky;
          bottom: 0;

          overflow-y: hidden;
          overflow-x: auto;
        }
      }

      .contentcolumn {
        width: 100%;
        max-width: 300px;
        margin: auto;
        height: 100%;
      }

  <body>
    <div class="box">
      <div class="c2 content">
        <div id="tag" class="c3 contentcolumn">
          Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,  
        </div>
      </div>
      <div class="sidebar c1">
        <ul>
          <li>Sidebar</li>
          <li>Sidebar</li>
          <li>Sidebar</li>
          <li>Sidebar</li>
        </ul>
      </div>
    </div>
  </body>

看似对问题负责的css是：

  .content {
    overflow-y: auto;
  }

本例中的 overflow 是必需的，因为我希望内容无限增长。没有溢出页面开始看起来像这样：

这个问题的“有效”解决方案是 - 如果我从内容列中删除 height 100% - 然后背景开始覆盖文本内容。但是当页面没有内容时，它不满足全屏覆盖要求：

完整示例请查看 fiddle。

所以基本上问题是 - 当出现溢出时如何将 div 的内容拉伸到全高。内容栏必须始终占据屏幕的整个高度（以及 content/text）..

Answer 1

目前，在 height: 100%; 的帮助下，100 万个“内容”.contentcolumn 的容器高度已设置为与弹性项目父项 <div class="c2 content"> 的高度完全匹配.

当然，.contentcolumn 的背景（-颜色）只会影响到此高度的溢出项目，而不会“跟随”垂直溢出的文本内容。

通过设置.contentcolumn 的高度定义为最小高度，该文本容器：

会根据他的文字内容高度溢出，
将始终至少具有其父弹性项目的高度

.contentcolumn {
  width: 100%;
  max-width: 300px;
  margin: auto;
  // height: 100%;
  min-height: 100%;   <= swapped height with min-height the height property of that container to make it fully cover its text content vertically
}

Answer 2

好的，所以我不知道这是否是世界上最好的解决方案，但我通过在 Chrome 调试器中尝试不同类型的选项设法找到了答案。

最终起作用的是 table 内栏内容的显示类型。

这是我的另一个回答，因为显然我的问题是重复的：My body background color disappears when scrolling

无论如何，这里是fiddle：https://jsfiddle.net/su1ykrhc/12/

      html,
      body {
        height: 100%;
        color: white;
        margin: 0px;
        padding: 0px;
      }

      .c2 {
        background-color: rosybrown;
      }
      .c3 {
        background-color: seagreen;
      }

      .box {
        height: 100%;
      }

      .content {
        height: 100%;
        overflow-y: auto;

        align-content: center;
        justify-content: center;
      }

      .contentcolumn {
        width: 100%;
        max-width: 300px;
        margin: auto;
        height: 100%;
        
        display: table;
      }

  <body>
    <div class="box">
      <div class="c2 content">
        <div id="tag" class="c3 contentcolumn">
          Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,  Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content, Content,  
        </div>
      </div>
    </div>
  </body>

这是没有内容的第二种情况：https://jsfiddle.net/d0upjeqm/

在这两种情况下，无论内容大小如何，列都被拉伸了 100%。我仍然对问题的更多解决方案感兴趣，并且对我的解决方案为何有效的一些解释 :)

看到另一个主题已有 8 年历史，我想通过一些 2021 年以后的最新发现来保持这个线程的活跃。

将内部 div 拉伸到屏幕的全高和溢出的内容

stretching inner div to full height of screen and content with overflow

html

css

background

overflow