平等柔性柱高度絕對定位的容器

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

平等柔性柱高度絕對定位的容器

回答

相關問題