如何讓CSS ROWS的高度相等？純粹的CSS/HTML

我一直在尋找通過interwebs，特別是StackOverflow，找到這個答案，但我一直無法。這裏的好人幫助我解決了「連續的柱高相同」 - 這對我的一些內容來說非常棒。但是，顯然這是一個完全不同的遊戲。如何讓CSS ROWS的高度相等？純粹的CSS/HTML

我有一個網站，基本的CSS佈局，頂部酒吧與徽標和導航，圖像容器下面，然後內容頁腳。

在'內容區域'中，我設置了兩個div類，oSection和eSection（奇數和偶數，聰明，我知道）。我這樣做，所以每個div可以有一個交替的背景顏色，以方便地在視覺上打破內容包。但是，這些行的高度並不相同。它們似乎只擴展到div內包含的內容的高度。理想情況下，我希望每個div都具有相同的高度，無論div中有多少內容（我想它必須與最大div一樣高（相同高度）），但我也想使確定他們各自在自己的行，所以我真正需要的是等高divs堆疊在彼此之上

我試過使用Flexbox的各種屬性，但它不工作，因爲我預計它會。

這裏是CSS（SNIP）

.oSection { 
    /*margin: 2% 0; */ 

    background-color: #E6E6E6; 
    height: 50%; 
    padding-left: .5%; 
    padding-top: .5%; 
    padding-bottom: .5%; 

    } 

    .eSection { 
    /* margin: 2% 0; */ 

    background-color: #FFFFFF; 
    height: 50%; 
    padding-left: .5%; 
    padding-top: .5%; 
    padding-bottom: .5%; 

    }

下面是HTML（中略）

<div class="oSection"> 
     <b>Web Design</b><br> 
     Yada yada yada 
     </div> 
     <div class="eSection"> 
     <b>Microsoft SharePoint</b><br> 
     Yada yada yada<br> 

     </div> 
     <div class="oSection"> 
     <b>Microsoft Dynamics CRM</b><br> 
     yad yada yada 
     </div> 
     <div class="eSection"> 
     <b>Technology Consulting</b><br> 
    yada yada yada 
     </div>

編輯按照要求，這裏是顯示錯誤大小的div的屏幕截圖。我希望每個帶有文本的水平div（不是頁眉或頁腳，只是中間的div）都是相同的高度，並且像現在一樣繼續堆疊在彼此之上。

Mis-Sized Divs

來源

2015-07-21 Brian Frick

而是採用%使用height: 480px或任何金額你想要什麼？

我不知道你怎麼想的具體這，這僅僅是猜測，如果你提供你有什麼VS你想要什麼，雖然

來源

2015-07-21 19:17:05

感謝您的快速響應。我不能使用px，因爲我正在設計這個也是移動友好的 - 所以百分比，或VH/VW是我最好的選擇。我將編輯帖子向你展示我現在擁有的東西 - 但我不能告訴你我想要什麼，但你應該能夠很容易地說出 - 你會看到我的oSection和eSection是不同的高度，當我想他們是相同的。此外，它僅在我的代碼中佔50％，因爲我試圖做一個誇張的例子。它的最終形式可能接近10-15％。 –

然後使用max-height和max-width作爲移動設備，所以bascially將寬度設置爲100％，但使用max-width：480px;設置寬度 – Keith

您是否嘗試過將所有四個div都放在一個具有已定義高度的單個div中？也許相對於屏幕？ –

我想截圖我可以編輯我的回答你喜歡的東西后，這個。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
.oSection, 
 
.eSection { 
 
    flex: 1; 
 
} 
 
.oSection { 
 
    background-color: #E6E6E6; 
 
} 
 
.eSection { 
 
    background-color: #FFFFFF; 
 
}

<div class="container"> 
 
    <div class="oSection"> <b>Web Design</b> 
 

 
    <br/>Yada yada yada</div> 
 
    <div class="eSection"> <b>Microsoft SharePoint</b> 
 
    <br/>Yada yada yada 
 
    <br/> 
 
    <br/> 
 
    <br/>Yada yada yada 
 
    <br/> 
 
    </div> 
 
    <div class="oSection"> <b>Microsoft Dynamics CRM</b> 
 

 
    <br/>yad yada yada</div> 
 
    <div class="eSection"> <b>Technology Consulting</b> 
 

 
    <br/>yada yada yada</div> 
 
</div>

來源

2015-07-21 19:39:42

這樣可以均勻地設置每個方框，但是如果您的文本數量超過您設置的範圍，那麼每個方框都不會彈性展開並顯示文本的其餘部分 – Keith

在這個演示的範圍內，因爲如果你有更準確的演示，我們可能會適應。 –

謝謝親愛的@Paulie_D！我會試一試，看看它是否適合我。我認爲它會 - 我會縮小它的手機尺寸。就像我說過的 - 我甚至可能不會使用它，只是想知道這是可能的，看看如何實現。感謝您抽出寶貴的時間 –

Flexbox，就無法實現這一目標。只有CSS Grid可以，所以你的瀏覽器支持有點淺。

最主要的是在CSS網格容器上設置grid-auto-rows: 1fr，並使其高度未定義。

Hre's a pen：https://codepen.io/Hlsg/pen/XgjWMz

來源

2017-06-13 22:45:40 Hlsg

如何讓CSS ROWS的高度相等？純粹的CSS/HTML

回答

相關問題