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

Posted 2023-02-19

技术标签:

【中文标题】将内部 div 拉伸到屏幕的全高和溢出的内容【英文标题】：stretching inner div to full height of screen and content with overflow 【发布时间】：2021-12-21 17:16:28 【问题描述】：

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

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

我对最后一点有疑问。

示例如下：https://jsfiddle.net/jqdy4w1g/19/

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

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

代码sn-p

      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%——那么背景就会开始覆盖文本内容。但是，当页面上没有内容时，它不满足全屏覆盖要求：

完整的例子请检查小提琴。

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

【问题讨论】：

删除所有内容区域的height: 100% 怎么样？不，它不起作用..我已经发布了有效的答案（2个版本 - 1个有内容，1个没有，所以你可以检查我想要达到什么样的结果） @Alex 我根据你提供的新信息调整了我的答案。 【参考方案1】：

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

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

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

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

.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

【讨论】：

是的，这是我在帖子底部提到的事情之一。有了这个改变——当根本没有内容时——绿色区域没有延伸到页面底部。这是一个例子：jsfiddle.net/vdxhLosy 嘿，看看我的回答！我想我找到了解决方案 @Alex 我根据我从你那里得到的新信息调整了我的答案确实如此！更新的版本按预期工作。 min-height 成功了。我会将您的答案标记为已接受的答案，因为我不知道为什么我自己的解决方案有效:) 谢谢您的意见。 @Alex 确实如此，因为 iirc display: table 使元素的内容拉伸甚至超出了设定的尺寸【参考方案2】：

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

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

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

不管怎样，这里是小提琴：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 拉伸到屏幕的全高和溢出的内容的主要内容，如果未能解决你的问题，请参考以下文章

在外部 div 内上下滑动内部 div 全高

基础上的全高柱

全高弯曲的角材料垫抽屉，内容自动溢出

如何使包含 div 溢出隐藏在包含 div 的内部

HTML 表格全高和全宽，无滚动

画布元素溢出其容器 div