如何让页面上的象限垂直拉伸以匹配水平相邻象限的高度？

Question

我希望在我的页面上有四个大小相同的象限 - 所有象限的宽度和高度都应该相同，并且它们之间有一些 space。

我现在得到的是：

我想要的是右上象限（"Pricing Exceptions"）垂直拉伸，就像被拉向底部一样，使其底部边框与左上象限（"Top 10 Items Purchased"水平对齐) 象限。

我想要两个底部象限相似，即 "Forecasted Spend" 象限是 "pulled down" 或 "stretched" 以便它与较高的 "Fill Rate" 象限水平对齐。

我怎样才能做到这一点？

我的代码（这是一个模型 - 所有 html 和 css 合并在一个 .html 文件中）如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
    background-color: white;
}
label {
    font-family: Candara, Calibri, Cambria, Georgia, serif;
}
.body-content {
    -webkit-box-shadow: -1px 0 5px 0 #000000;
    -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
    box-shadow: -1px 0 5px 0 #000000;
    box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
   padding-left: 1px;
   padding-right: 1px;
   padding-bottom: 15px;
}
.jumbotronjr {
  padding: 12px;
  margin-bottom: -16px;
  font-size: 21px;
  font-weight: 200;
  color: inherit;
  background-color: white;
}
.addltopmargin {
    margin-top: 8px;
}
.sectiontext {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Candara, Calibri, Cambria, serif;
    color: green;
    margin-top: -4px;    
}
.bottommarginbreathingroom {
    margin-bottom: 4px;
}
.marginaboveandbelow {
    margin-top: 15px;
    margin-bottom: 15px;
}
.rightjustifytext {
  text-align: right;
}
table {
    font-family: georgias, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
.contents{
  height:50%;
  width:100%;
}
.redfont {
    color: red;
}
.bold {
    font-weight: bold;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.container div {
  display: inline-block;
  width: 50vw;
  height: 50vh;
  overflow-y: scroll;
}
.topleft {
  margin-top: 16px;
  margin-left: 16px;
  margin-bottom: 16px;
  padding: 16px;
  border:1px solid black;
}
.topright {
  margin-top: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
  margin-left: -12px;
  padding: 16px;
  border:1px solid black;
}
.bottomleft {
  margin-left: 16px;
  padding: 16px;
  border:1px solid black;
}
.bottomright {
  margin-right: 16px;
  margin-left: -12px;
  padding: 16px;
  border:1px solid black;
}
</style>
</head>

<body>

<div class="contents">
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
        <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
            </input>
            <label> to </label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
            </input>
        </div>

        <table>
            <tr>
                <th>Item Code</th>
                <th>Description</th>
                <th>Qty</th>
            </tr>
            <tr>
                <td>100250</td>
                <td>Artichokes Green Globe 18 Size</td>
                <td>9084</td>
            </tr>
            <tr>
                <td>102800</td>
                <td>Broccoli Bunched 18 Size</td>
                <td>8837</td>
            </tr>
            <tr>
                <td>100050</td>
                <td>Anise Fennell 12</td>
                <td>6653</td>
            </tr>
            <tr>
                <td>101600</td>
                <td>Beans Blue Lake Round Hand Pick</td>
                <td>5846</td>
            </tr>
            <tr>
                <td>106000</td>
                <td>Carrots Cello 48/1#</td>
                <td>4266</td>
            </tr>
            <tr>
                <td>108000</td>
                <td>Celery Pascal 12</td>
                <td>3774</td>
            </tr>
            <tr>
                <td>105000</td>
                <td>Cabbage Green 45-50#</td>
                <td>3024</td>
            </tr>
            <tr>
                <td>104000</td>
                <td>Brussel Sprouts Cello Cups 12/12 oz</td>
                <td>2663</td>
            </tr>
            <tr>
                <td>100450</td>
                <td>Asparagus Colossal 11/1#</td>
                <td>2624</td>
            </tr>
            <tr>
                <td>102350</td>
                <td>Beets With Tops 24</td>
                <td>2253</td>
            </tr>
        </table>
</div>
</div>

<div class="col-md-6">
<div class="topright">
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont">Red denotes Contract Item Overages</label>
</br>
<label>For Weyand on the pricing week of - 7/31/2016</label>
        <table>
            <tr>
                <th>Item Code</th>
                <th>Description</th>
                <th>Bid Price</th>
                <th>Sell Price</th>
                <th>Qty</th>
            </tr>
            <tr>
                <td>231083</td>
                <td>BERRIES, BLACK DRISC 1/6 OZ</td>
                <td>0.00</td>
                <td>4.35</td>
                <td>1.00</td>
            </tr>
            <tr>
                <td>104150</td>
                <td>BRUSSEL SPROUTS, 25#</td>
                <td>0.00</td>
                <td>36.20</td>
                <td>1.00</td>
            </tr>
            <tr>
                <td>261650</td>
                <td>LIMES, 200 CT 40#</td>
                <td>0.00</td>
                <td>18.65</td>
                <td>2.00</td>
            </tr>
            <tr>
                <td>140000</td>
                <td>MUSHROOMS, BUTTON 10#</td>
                <td>0.00</td>
                <td>19.95</td>
                <td>2.00</td>
            </tr>
            <tr>
                <td>398980</td>
                <td>MELONS, CANTALOUPE CHUNKS 2/5#</td>
                <td>38.30</td>
                <td>35.00</td>
                <td>10.00</td>
            </tr>
            <tr>
                <td>398280</td>
                <td>MELONS, HONEYDEW CHUNKS 2/5#</td>
                <td>37.30</td>
                <td>34.50</td>
                <td>15.00</td>
            </tr>
            <tr>
                <td>398036</td>
                <td>PINEAPPLE, CHUNKS 2/5#</td>
                <td>37.70</td>
                <td>35.00</td>
                <td>10.00</td>
            </tr>
            <tr>
                <td>351135</td>
                <td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td>
                <td>6.46</td>
                <td>6.01</td>
                <td>2.00</td>
            </tr>
            <tr>
                <td>208110</td>
                <td>APPLES, GALA 12 CT</td>
                <td>0.00</td>
                <td>8.04</td>
                <td>1.00</td>
            </tr>
        </table>
    </div>
</div>
</div>

<div class="row">
<div class="col-md-6">
<div class="bottomleft">
<h2 class="sectiontext">Forecasted Spend</h2>
        <table>
            <tr>
                <th>Item Code</th>
                <th>Last Week's Usage</th>
                <th>This Week's Price</th>
                <th>Forecasted Spend</th>
            </tr>

            <tr>
                <td>261650</td>
                <td>49</td>
                <td>3.14</td>
                <td>153.86</td>
            </tr>
            <tr>
                <td>231083</td>
                <td>52</td>
                <td>1.25</td>
                <td>65.00</td>
            </tr>
            <tr>
                <td>398980</td>
                <td>46</td>
                <td>4.95</td>
                <td>227.70</td>
            </tr>
            <tr>
                <td>351135</td>
                <td>40</td>
                <td>0.75</td>
                <td>30.00</td>
            </tr>
            <tr>
                <td>398036</td>
                <td>42</td>
                <td>3.00</td>
                <td>126.00</td>
            </tr>
            <tr>
                <td>208110</td>
                <td>42</td>
                <td>2.50</td>
                <td>105.00</td>
            </tr>
            <tr>
                <td class="bold">TOTAL</td>
                <td class="bold">271</td>
                <td class="bold">--</td>
                <td class="bold">7.56</td>
            </tr>
        </table>
    </div>
    </div>

<div class="col-md-6">
<div class="bottomright">
<h2 class="sectiontext">Fill Rate</h2>
        <table>
            <tr>
                <th>Company Name</th>
                <th>Reason Description</th>
                <th>Ordered</th>
                <th>Shipped</th>
                <th>Rate %</th>
            </tr>

            <tr>
                <td>ABUELOS #A11 - PEORIA</td>
                <td>Regular Item, no issues</td>
                <td>622</td>
                <td>622</td>
                <td>100</td>
            </tr>
            <tr>
                <td>ABUELOS #A09 - EAST PLANO</td>
                <td>Regular Item, no issues</td>
                <td>371</td>
                <td>375</td>
                <td>101</td>
            </tr>
            <tr>
                <td>ABUELOS #A26 - MYRTLE BEACH</td>
                <td>Credit - Product Quality (for credit adjustments only)</td>
                <td>19</td>
                <td>9</td>
                <td>47</td>
            </tr>
            <tr>
                <td>ABUELOS #A38 - LAKELAND</td>
                <td>Regular Item, no issues</td>
                <td>569</td>
                <td>569</td>
                <td>100</td>
            </tr>
            <tr>
                <td class="bold">TOTAL</td>
                <td></td>
                <td class="bold">1581</td>
                <td class="bold">1575</td>
                <td class="bold">99.6</td>
            </tr>
        </table>
    </div>
</div>
</div>

</div>
</body>
</html>

Answer 1

如果您不创建动态大小的容器，那么您可以像这样设置高度：

.topright, .topleft {
height: 400px; 
}

这将使它们保持均匀。

Answer 2

花了我很多时间，我得到了这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
    background-color: white;
}
label {
    font-family: Candara, Calibri, Cambria, Georgia, serif;
}
.body-content {
    -webkit-box-shadow: -1px 0 5px 0 #000000;
    -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
    box-shadow: -1px 0 5px 0 #000000;
    box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
   padding-left: 1px;
   padding-right: 1px;
   padding-bottom: 15px;
}
.jumbotronjr {
  padding: 12px;
  margin-bottom: -16px;
  font-size: 21px;
  font-weight: 200;
  color: inherit;
  background-color: white;
}
.addltopmargin {
    margin-top: 8px;
}
.sectiontext {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Candara, Calibri, Cambria, serif;
    color: green;
    margin-top: -4px;    
}
.bottommarginbreathingroom {
    margin-bottom: 4px;
}
.marginaboveandbelow {
    margin-top: 15px;
    margin-bottom: 15px;
}
.rightjustifytext {
  text-align: right;
}
table {
    font-family: georgias, sans-serif;
    border-collapse: collapse;
    width: 100%;
    align:center;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
.contents{
  height:50%;
  width:100%;
}
.redfont {
    color: red;
}
.bold {
    font-weight: bold;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.container div {
  display: inline-block;
  width: 50vw;
  height: 50vh;
  overflow-y: scroll;
}
.topleft {
  margin-top: 16px;
  margin-left: 16px;
  margin-bottom: 16px;
  margin-right:19px;
  padding-top: 16px;
  padding-bottom:16px;
  border:1px solid black;
  height:500px;

}
.topright {
  margin-top: 16px;
  margin-right: 16px;
    margin-left: 15px;

  padding-top: 16px;
  padding-bottom:16px;
  height:500px;

  border:1px solid black;
}
.bottomleft {
  margin-left: 16px;
  margin-top:30px;
  margin-right:18px;
  padding-top: 16px;
  padding-bottom:16px;
  border:1px solid black;
  height:385px;
}
.bottomright {
  margin-right: 16px;
  margin-top:30px;
  margin-left:15px;




  padding-top: 16px;
  padding-bottom:16px;
  border:1px solid black;
  height:385px;
}
#xyz{


}
</style>
</head>

<body>

<div class="contents">
<div class="row">
<div class="col-md-6 col-sm-12 ">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
        <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
            </input>
            <label> to </label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
            </input>
        </div>

        <table>
            <tr>
                <th>Item Code</th>
                <th>Description</th>
                <th>Qty</th>
            </tr>
            <tr>
                <td>100250</td>
                <td>Artichokes Green Globe 18 Size</td>
                <td>9084</td>
            </tr>
            <tr>
                <td>102800</td>
                <td>Broccoli Bunched 18 Size</td>
                <td>8837</td>
            </tr>
            <tr>
                <td>100050</td>
                <td>Anise Fennell 12</td>
                <td>6653</td>
            </tr>
            <tr>
                <td>101600</td>
                <td>Beans Blue Lake Round Hand Pick</td>
                <td>5846</td>
            </tr>
            <tr>
                <td>106000</td>
                <td>Carrots Cello 48/1#</td>
                <td>4266</td>
            </tr>
            <tr>
                <td>108000</td>
                <td>Celery Pascal 12</td>
                <td>3774</td>
            </tr>
            <tr>
                <td>105000</td>
                <td>Cabbage Green 45-50#</td>
                <td>3024</td>
            </tr>
            <tr>
                <td>104000</td>
                <td>Brussel Sprouts Cello Cups 12/12 oz</td>
                <td>2663</td>
            </tr>
            <tr>
                <td>100450</td>
                <td>Asparagus Colossal 11/1#</td>
                <td>2624</td>
            </tr>
            <tr>
                <td>102350</td>
                <td>Beets With Tops 24</td>
                <td>2253</td>
            </tr>
        </table>
</div>
</div>

<div class="col-md-6 col-sm-12">
<div class="topright">

<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont">Red denotes Contract Item Overages</label>
</br>
<label>For Weyand on the pricing week of - 7/31/2016</label>
        <table>
            <tr>
                <th>Item Code</th>
                <th>Description</th>
                <th>Bid Price</th>
                <th>Sell Price</th>
                <th>Qty</th>
            </tr>
            <tr>
                <td>231083</td>
                <td>BERRIES, BLACK DRISC 1/6 OZ</td>
                <td>0.00</td>
                <td>4.35</td>
                <td>1.00</td>
            </tr>
            <tr>
                <td>104150</td>
                <td>BRUSSEL SPROUTS, 25#</td>
                <td>0.00</td>
                <td>36.20</td>
                <td>1.00</td>
            </tr>
            <tr>
                <td>261650</td>
                <td>LIMES, 200 CT 40#</td>
                <td>0.00</td>
                <td>18.65</td>
                <td>2.00</td>
            </tr>
            <tr>
                <td>140000</td>
                <td>MUSHROOMS, BUTTON 10#</td>
                <td>0.00</td>
                <td>19.95</td>
                <td>2.00</td>
            </tr>
            <tr>
                <td>398980</td>
                <td>MELONS, CANTALOUPE CHUNKS 2/5#</td>
                <td>38.30</td>
                <td>35.00</td>
                <td>10.00</td>
            </tr>
            <tr>
                <td>398280</td>
                <td>MELONS, HONEYDEW CHUNKS 2/5#</td>
                <td>37.30</td>
                <td>34.50</td>
                <td>15.00</td>
            </tr>
            <tr>
                <td>398036</td>
                <td>PINEAPPLE, CHUNKS 2/5#</td>
                <td>37.70</td>
                <td>35.00</td>
                <td>10.00</td>
            </tr>
            <tr>
                <td>351135</td>
                <td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td>
                <td>6.46</td>
                <td>6.01</td>
                <td>2.00</td>
            </tr>
            <tr>
                <td>208110</td>
                <td>APPLES, GALA 12 CT</td>
                <td>0.00</td>
                <td>8.04</td>
                <td>1.00</td>
            </tr>
        </table>
    </div>
</div>
<div class="col-md-6 col-sm-12"><br/></div>
<div class="col-md-6 col-sm-12"><br/></div>
</div>

<div class="row">
<div class="col-md-6 col-sm-12" >
<div class="bottomleft" >
<h2 class="sectiontext">Forecasted Spend</h2>
        <table>
            <tr>
                <th>Item Code</th>
                <th>Last Week's Usage</th>
                <th>This Week's Price</th>
                <th>Forecasted Spend</th>
            </tr>

            <tr>
                <td>261650</td>
                <td>49</td>
                <td>3.14</td>
                <td>153.86</td>
            </tr>
            <tr>
                <td>231083</td>
                <td>52</td>
                <td>1.25</td>
                <td>65.00</td>
            </tr>
            <tr>
                <td>398980</td>
                <td>46</td>
                <td>4.95</td>
                <td>227.70</td>
            </tr>
            <tr>
                <td>351135</td>
                <td>40</td>
                <td>0.75</td>
                <td>30.00</td>
            </tr>
            <tr>
                <td>398036</td>
                <td>42</td>
                <td>3.00</td>
                <td>126.00</td>
            </tr>
            <tr>
                <td>208110</td>
                <td>42</td>
                <td>2.50</td>
                <td>105.00</td>
            </tr>
            <tr>
                <td class="bold">TOTAL</td>
                <td class="bold">271</td>
                <td class="bold">--</td>
                <td class="bold">7.56</td>



            </tr>




        </table >
    </div>
    </div>

<div class="col-md-6 col-sm-12">
<div class="bottomright">
<h2 class="sectiontext">Fill Rate</h2>
        <table>
            <tr>
                <th>Company Name</th>
                <th>Reason Description</th>
                <th>Ordered</th>
                <th>Shipped</th>
                <th>Rate %</th>
            </tr>

            <tr>
                <td>ABUELOS #A11 - PEORIA</td>
                <td>Regular Item, no issues</td>
                <td>622</td>
                <td>622</td>
                <td>100</td>
            </tr>
            <tr>
                <td>ABUELOS #A09 - EAST PLANO</td>
                <td>Regular Item, no issues</td>
                <td>371</td>
                <td>375</td>
                <td>101</td>
            </tr>
            <tr>
                <td>ABUELOS #A26 - MYRTLE BEACH</td>
                <td>Credit - Product Quality (for credit adjustments only)</td>
                <td>19</td>
                <td>9</td>
                <td>47</td>
            </tr>
            <tr>
                <td>ABUELOS #A38 - LAKELAND</td>
                <td>Regular Item, no issues</td>
                <td>569</td>
                <td>569</td>
                <td>100</td>
            </tr>
            <tr>
                <td class="bold">TOTAL</td>
                <td></td>
                <td class="bold">1581</td>
                <td class="bold">1575</td>
                <td class="bold">99.6</td>


            </tr>
        </table>
    </div>
</div>
</div>
<div class="row">
  <div class="col-lg-6"><br/></div>
  <div class="col-lg-6"><br/></div>
</div>


</div>
</body>
</html>

Answer 3

因为每个容器的高度会随着内容的增加而自动增加。由于四个表格的内容不同，可以设置一个固定的高度来解决。

Answer 4

我通常创建自己的 javascript 来检查每一行。我给所有应该具有相同高度的 divs（在你的例子中是 col-md-6 divs）一个额外的 class: match-height （盗版现有插件 matchHeight.js）。

此代码将遍历所有 .row div 并查看哪个 .match-height div 最高。完成此操作后，代码会将所有 div 调整为最高 div，从而得到 min-height CSS.

$(window).on("load resize", function equalHeights() {

  $('.row').each(function(){
    var highestBox = 0;
    $(this).find('.match-height').css("min-height", 0);
    $(this).find('.match-height').each(function() {
      if ($(this).outerHeight() > highestBox) {
        highestBox = $(this).outerHeight();
      }
    });
    $(this).find('.match-height').css("min-height", highestBox);
  });

});

示例：

<div class="container">
  <div class="row">
    <div class="col-md-6 match-height">
      1st table
    </div>
    <div class="col-md-6 match-height">
      2nd table
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 match-height">
      3rd table
    </div>
    <div class="col-md-6 match-height">
      4th table
    </div>
  </div>
</div>

让我知道这是否是您要找的，

如何让页面上的象限垂直拉伸以匹配水平相邻象限的高度？

How can I get the quadrants on my page to vertically stretch to match the height of their horizontal neighbor?

html

css

alignment

stretching

twitter-bootstrap