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

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

转载作者：太空宇宙更新时间：2023-11-03 20:32:33

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

我现在得到的是:

我想要的是右上象限(“定价异常(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/

文章推荐： python - 如何使用角度轴旋转 3d 点集到旋转矩阵？

文章推荐： html - 将鼠标悬停在 li 上时，如何让我的链接改变颜色？

文章推荐： C# - 使用反射的动态转换

文章推荐： javascript - 如何在 JQuery 中动态改变颜色？

awk - 如果行与“foo”匹配，线上方与“bar”匹配，线下方与“baz”匹配，则删除行？
使用sed和/或awk，仅在行包含字符串“ foo”并且行之前和之后的行分别包含字符串“ bar”和“ baz”时，我才希望删除行。因此，对于此输入： blah blah foo blah bar
c# - 如何按 X% 匹配 2 个字符串(即 >90% 匹配)
例如: S1: "some filename contains few words.txt" S2:“一些文件名包含几个单词 - draft.txt” S3:“一些文件名包含几个单词 - 另一个 dr
R 合并数据帧，允许不精确的 ID 匹配(例如，附加字符 1234 匹配 ab1234)
我正在尝试处理一些非常困惑的数据。我需要通过样本 ID 合并两个包含不同类型数据的大数据框。问题是一张表的样本 ID 有许多不同的格式，但大多数都包含用于匹配其 ID 中某处所需的 ID 字符串，例如
css - 匹配 col-md 时显示 div，匹配 col-sm 时不显示
我想在匹配特定屏幕尺寸时显示特定图像。在这种情况下，对于 Bootstrap ，我使用 col-xx-## 作为我的选择。但似乎它并没有真正按照我认为应该的方式工作。基本思路，我想显示一种全屏图像，
apache - mod_rewrite 问题 : RewriteCond %{REQUEST_FILENAME} ! -f 匹配，即使 REQUEST_FILENAME 不应(完全)匹配
出于某种原因，这条规则 RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*
F# 匹配 ->
我想做类似的东西(Nemerle 语法) def something = match(STT) | 1 with st= "Summ" | 2 with st= "AVG" =>
JavaScript 匹配
假设这是我的代码 var str="abc=1234587;abc=19855284;abc=1234587;abc=19855284;abc=1234587;abc=19855284;abc=123
JavaScript 匹配
我怎样才能得到这个字符串的数字:'(31.5393701, -82.46235569999999)' 我已经在尝试了，但这离解决方案还很远:) text.match(/$(\d+),(\d+)$/
JavaScript 匹配
如何去除输出中的逗号 (,)？有没有更好的方法从字符串或句子中搜索 url。 alert(" http://www.cnn.com df".match(/https?:\/\/([-\w\.]+
Python - 匹配
a = ('one', 'two') b = ('ten', 'ten') z = [('four', 'five', 'six'), ('one', 'two', 'twenty')] 我正在尝试
vba - 循环遍历行和列时的索引/匹配
我已经编写了以下代码，我希望用它来查找从第 21 列到另一张表中最后一行的值，并根据这张表中 A 列和另一张表中 B 列中的值将它们返回到这张表床单。当我使用下面的代码时，我得到一个工作表错误。你能
Excel 匹配 IF 语句未正确评估
我在以下结构中有两列 A B 1 49 4922039670 我已经能够评估 =LEN(A1)如2 , =LEFT(B1,2)如49 , 和 =LEFT(B1,LEN(A1)
基于行首的 Vim 匹配
我有一个文件，其中一行可以以 + 开头, -或 * .在其中一些行之间可以有以字母或数字(一般文本)开头的行(也包含这些字符，但不在第 1 列中!)。知道这一点，设置匹配和突出显示机制的最简单方法是
正则表达式:匹配，但如果在评论中则不匹配
我有一个数据字段文件，其中可能包含注释，如下所示: id, data, data, data 101 a, b, c 102 d, e, f 103 g, h, i // has to do with
匹配 url 的正则表达式模式
我有以下模式:/^\/(?P.+)$/匹配:/url . 我的问题是它也匹配 /url/page ，如何忽略/在这个正则表达式中？该模式应该: 模式匹配:/url 模式不匹配:/url/page 提
r - R中多维度的聚类/匹配
我有一个非常庞大且复杂的数据集，其中包含许多对公司的观察。公司的一些观察是多余的，我需要制作一个键来将多余的观察映射到一个单独的观察。然而，判断他们是否真的代表同一家公司的唯一方法是通过各种变量的相似
xpath 匹配 - 查找值不在值集中的标签是否存在
我有以下 XML A B C 我想查找 if not(exists(//Record/subRecord
javascript - 匹配/不匹配的正则表达式上没有出现警报框？
我制作了一个正则表达式来验证潜在的比特币地址，现在当我单击报价按钮时，我希望根据正则表达式检查表单中输入的值，但它不起作用。 https://jsfiddle.net/arkqdc8a/5/ var
sql - 检查支架是否平衡/匹配
我有一些 MS Word 文档，我已将其全部内容转移到 SQL 表中。内容包含多个方括号和大括号，例如 [{a} as at [b],] {c,} {d,} etc 我需要进行检查以确保括号平衡/匹
JavaScript Unicode 匹配
我正在使用 Node.js 从 XML 文件读取数据。但是当我尝试将文件中的数据与文字进行比较时，它不匹配，即使它看起来相同: const parser: xml2js.Parser = new

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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