平等柔性柱高度绝对定位的容器

Codepen这里：https://codepen.io/anon/pen/MvqWwg 平等柔性柱高度绝对定位的容器

我有绝对定位div.container。里面有div.wrapper。并在div.wrapper两个div作为柔性列。这些列有背景。

如何使这些背景走到最长列的末端（即使它们高度相同），而不仅仅是容器的可见高度？我无法从div.container删除position: absolute。

这是HTML代码：

<div class="container"> 
    <div class="wrapper"> 
     <div class="div1"> 
      <p>Some long content here</p> 
      <p>Some long content here</p> 
      <p>Some long content here</p> 
      <p>Some long content here</p> 
      <p>Some long content here</p> 
      <p>Some long content here</p> 
      <p>Some long content here</p> 
      <p>Some long content here</p> 
      <p>Some long content here</p> 
     </div> 
     <div class="div2"> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
      <p>Some even longer content here</p> 
     </div> 
    </div> 
</div>

这是CSS：

.container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    display: flex; 
    flex-direction: column; 
    overflow: auto; 
} 
.wrapper { 
    display: flex; 
    align-items: stretch; 
    width: 100%; 
} 
.div1 { 
    background-color: yellow; 
} 
.div2 { 
    flex: 1; 
    background-color: green; 
}

来源

2017-08-28 greenRed

您需要删除'显示：flex'和'弯曲方向：column'从容器的风格，你的包装已经有柔性 - 更新codepen https://codepen.io/ kejt/pen/EvdyQy – Kejt

谢谢你，Kejt。但是现在如果内容很短（它是动态的），它不会占用所有可用空间，如下所示：https://codepen.io/anon/pen/PKybvK。有没有办法保持这个功能？ – greenRed

您可以尝试在您的容器和包装中添加'min-height：100vh;'https://codepen.io/kejt/pen/gxBgOG – Kejt

在container取出弯曲特性。

我还从.wrapper中删除了align-items: stretch; width: 100%;，因为它是它们的默认值，不需要设置。

.container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    /* commented out these 2 lines 
 
    display: flex; 
 
    flex-direction: column; 
 
    */ 
 
    overflow: auto; 
 
} 
 

 
.wrapper { 
 
    min-height: 100%; 
 
    display: flex; 
 
    /* commented out these 2 lines as they are not needed 
 
    align-items: stretch; 
 
    width: 100%; 
 
    */ 
 
} 
 

 
.div1 { 
 
    background-color: yellow; 
 
} 
 

 
.div2 { 
 
    flex: 1; 
 
    background-color: green; 
 
} 
 

 
p { 
 
    padding: 20px 10px; 
 
}

<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="div1"> 
 
     <p>Some long content here</p> 
 
     <p>Some long content here</p> 
 
     <p>Some long content here</p> 
 
    </div> 
 
    <div class="div2"> 
 
     <p>Some even longer content here</p> 
 
     <p>Some even longer content here</p> 
 
     <p>Some even longer content here</p> 
 
     <p>Some even longer content here</p> 
 
     <p>Some even longer content here</p> 
 
     <p>Some even longer content here</p> 
 
     <p>Some even longer content here</p> 
 
     <p>Some even longer content here</p> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-08-28 08:33:06 LGSon

现在，如果我删除弯曲，如果内容很短，比这两列不会占据整个页面的高度。这也是必要的。有没有办法保存这个功能？ – greenRed

@greenRed是的，我更新了我的答案。它适用于除IE之外的所有应用程序，因为IE在涉及'min-height'时存在一个错误。你需要它在IE上工作吗？ – LGSon

谢谢！不，IE现在不重要:) – greenRed

平等柔性柱高度绝对定位的容器

回答

相关问题