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

标签 html css twitter-bootstrap alignment stretching

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

我现在得到的是:

enter image description here

我想要的是右上象限(“定价异常(exception)”)垂直拉伸(stretch)，就像被拉向底部一样，因此它的底部边框与左上象限(“购买的前 10 件商品”)水平对齐.

我希望两个底部象限相似，即“预测支出”象限被“下拉”或“拉伸(stretch)”，以便它与较高的“填充率”象限水平对齐。

我怎样才能做到这一点？

我的代码(这是一个模型——所有的 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">$707.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>

最佳答案

我通常创建自己的 javascript 来检查每一行。我给所有应该具有相同高度的 div(在你的例子中是 col-md-6 div)一个额外的类: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>

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

关于html - 如何让页面上的象限垂直拉伸(stretch)以匹配水平相邻象限的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38883599/

上一篇：javascript - 如何在 JQuery 中动态改变颜色？

下一篇：html - 将鼠标悬停在 li 上时，如何让我的链接改变颜色？

相关文章：

jquery - 我在切换类中做的越来越少，当我单击但向下箭头和向上箭头没有出现时，文本正在更改(更多选项变为更少)

javascript - 在用户输入输入后在右侧显示某些内容

javascript - Twitter Bootstrap、导航栏、下拉菜单无法正常工作

html - 为什么浏览器变窄后无法点击链接？

javascript - 如何从 jQuery 中的字符串中删除可变数量的 p 标签

javascript - 网格和动态表的高度

jquery - 无法获取垂直对齐 : top to work correctly for inline-block, 固定高度元素。

html - 托管网站时无法识别移动菜单下拉菜单

jquery - 在密码字段内移动显示/隐藏密码链接

javascript - 带有 X-Editable 的 Rails 4 不起作用

©2024 IT工具网  联系我们