CODEWITHSUNDEEP
htmlcssflexbox
Brian Frick
Brian Frick

Reputation: 146

How to make CSS rows have equal height?

I have a site, basic CSS layout, Top bar with logo and nav, image container below it, and then content a footer.

In the 'content area' I have set up two div classes, oSection and eSection (odd and even, clever, I know). I did this so each div could have an alternating background color to easily visually break up the packets of content. However, these rows are not of equal height. They seem to expand only to the height of what content is contained within the div. Ideally, I'd like each of these divs to have the same height, regardless of how much content is in the div (I guess it would have to be as tall (same height) as largest div), but I also want to make sure they are each on their own individual line, so what I really need is equal height divs that are stacked on top of each other

I have tried using Flexbox with various properties, but it wasn't working as I expected it to.

.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%;
}
<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>

Here is a screenshot showing the mis-sized Divs. I want each of the horizontal divs with text in them (not header or footer, just the middle divs) to be the same height, and continue to be stacked on top of each other like they are now.

Mis-Sized Divs

Upvotes: 2

Views: 4211

Answers (3)

HLLL
HLLL

Reputation: 3751

Flexbox can't achieve this. Only CSS Grid can, so your browser support is somewhat shallow.

The main thing is to set grid-auto-rows: 1fr on the CSS grid container and have it's height undefined.

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114980

I think you are after something like this.

.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>

Upvotes: 2

Huang Chen
Huang Chen

Reputation: 1205

instead of using % use height: 480px or whatever amount you want?

I'm not sure how specific you want this, this is just speculation, I can edit my answer if you provide a screenshot of what you have vs what you want though

Upvotes: 0

Related Questions