Question

I made an example to represent my current issue.

I want this structure. I tried height: 100% on the blue part but it didn't work, so I gave height: 80vh.

This is an issue because nothing is aligned anymore and gets worse if you make the windows smaller or bigger (not responsive).

How do I make the left and right side of the content aligned at the top and bottom with a margin-top of 5px to the black part?

.red {
  background: red;
}

.blue {
  background: blue;
  height: 80vh;
}

.green {
  background: green;
}

img {
  width: 100%;
  height: 100%;
}

.black {
  background: black;
  margin-top: 5px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12">
          <div class="red">
            <img src="https://www.w3schools.com/w3images/fjords.jpg" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="green">
            <img src="https://www.w3schools.com/w3images/fjords.jpg" />
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="blue">

      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="black">
        Hi
      </div>
    </div>
  </div>
</div>

Answer 1

I tackled something similar to this and whipped up a jQuery solution to it that you might want to try, it's been working great for me.

Basically the function gets the height of the column you know is going to be the tallest. If that content is larger than the others it sets the height of the others to the same of the taller piece of content.

$(document).ready(function () {
   var tallest = $(".red").height();
   var shortcolumn1 = $(".blue").height();       
   if (tallest >= shortcolumn1) {    
       $(".blue").css("height",""+ tallest +"px");
       $(".green").css("height",""+ tallest +"px");
    }
   else {       
   }
 });

Answer 2

Change CSS, Your Footer height 25px;

.red {
  background: red;
  height:calc(50vh - 12.5px);
}

.blue {
  background: blue;
  height:calc(100vh - 25px);
}

.green {
  background: green;
  height:calc(50vh - 12.5px);
}

.red {
  background: red;
  height:calc(50vh - 12.5px);
}

.blue {
  background: blue;
  height:calc(100vh - 25px);
}

.green {
  background: green;
  height:calc(50vh - 12.5px);
}

img {
  width: 100%;
  height: 100%;
}

.black {
  background: black;
  margin-top: 5px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12">
          <div class="red">
            <img src="https://www.w3schools.com/w3images/fjords.jpg" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="green">
            <img src="https://www.w3schools.com/w3images/fjords.jpg" />
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="blue">

      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="black">
        Hi
      </div>
    </div>
  </div>
</div>

How to make elements the same height

2 个答案: