中行高度适合twitter-bootstrap网格系统

Question

我是shohel rana。 自很多天以来，我一直面临一个问题。 我没有找到解决我问题的方法。

问题是：

我有三排。 第一行的高度将根据其内容的高度进行调整，而第三行的高度将根据其内容的高度进行调整。 但是第二行将根据其余高度进行调整。

这是我的问题，如下图所示：

在此处输入图片说明

但是我需要下面的结果：

在此处输入图片说明

这是苦行僧

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row row-1">
      <div class="col-md-4">ROW1 COLUMN1</div>
      <div class="col-md-4">ROW1 COLUMN2</div>
      <div class="col-md-4">Lorem ipsum dolor sit amet

Consectetur adipiscinging elite Integer molestie lorem at massa Facilisis in prestium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat ROW3在Faucibus porta laROW1 COLUMN2 Lorem ipsum dolor sitmet consectetur adipiscing elite Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet肖像菜LOREM

</html>

CSS：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
.container-fluid {
  background-color: gray;
  height: 100%;
}
.row-1 {
  background-color: #b200ff;
  margin-bottom: 5px;
}
.row-1 > .col-md-4 {
  background-color: #0094ff;
  border: 1px dashed #111010;
  text-align: center;
}
.row-2 {
  background-color: #b6ff00;
  margin-bottom: 5px;
}
.row-2 > .col-md-12 {
  background-color: #ff6a00;
  border: 1px dashed #111010;
  text-align: center;
}
.row-3 {
  background-color: #00ff21;
}
.row-3 > .col-md-4 {
  background-color: #00ffff;
  border: 1px dashed #111010;
  text-align: center;
}

预防：

避免显示：表格，表格行和表格单元格。
避免使用JavaScript代码。

Answer 1

对于您的问题，有一个通用的解决方案是使用spacer元件（例如div）。 要集成此元素，您必须稍微更改标记。

标记：

<div class="container-fluid first-container">
    <div class="row row-1">
        <div class="col-md-4">ROW1 COLUMN1</div>
        <div class="col-md-4">ROW1 COLUMN2</div>
        <div class="col-md-4">ROW1 COLUMN3</div>
    </div>
</div>

<div class="container-fluid full-height-container">
    <div class="row row-2">
        <div class="col-md-12">
            ROW2 COLUMN1
        </div>
        <div class="spacer"></div>
    </div>

</div>

<div class="container-fluid last-container">
    <div class="row row-3">
        <div class="col-md-4">ROW3 COLUMN1</div>
        <div class="col-md-4">ROW3 COLUMN2</div>
        <div class="col-md-4">ROW3 COLUMN3</div>
    </div>
</div>

如您所见，我将所有重要的行包装在单独的容器中，并在全高容器中插入了spacerelement。 该div必须与最后一行具有相同的高度，以防止内容被放置在最后一行的后面。

CSS：

    html,
    body {
        height: 100%;
        min-height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .container-fluid {
        background-color: gray;
    }

    .row-1 {
        background-color: #b200ff;
    }

    .first-container {
        position: absolute;
        width: 100%;
        z-index: 1;
    }

    .full-height-container {
        height: 100%;
        padding-top: 25px; /*height of the first row*/
    }

    .spacer {
        height: 22px;
        position: absolute;
        bottom: 0;
    }

    .last-container {
        margin-top: -22px;
    }

    .row-1 > .col-md-4 {
        background-color: #0094ff;
        border: 1px dashed #111010;
        text-align: center;
    }

    .row-2 {
        background-color: #b6ff00;
        height: 100%;
    }

        .row-2 > .col-md-12 {
            background-color: #ff6a00;
            border: 1px dashed #111010;
            height: 100%;
            text-align: center;
        }

    .row-3 {
        background-color: #00ff21;
    }

        .row-3 > .col-md-4 {
            background-color: #00ffff;
            border: 1px dashed #111010;
            text-align: center;
        }

在这里，您可以看到我添加了其他CSS类。 a）为了更好的可读性，b）您应该避免覆盖本机引导css类，因为这会在项目扩展时给您带来很多麻烦。

重要的是，将高度（100％）通过DOM元素传递到第二row-2否则高度将不会被设置。

还要注意，现在第一行位于绝对位置。 这意味着它将溢出第二行。 为避免这种情况，您必须将padding-top设置为full-height-content区域。

这是一个不错的CSS解决方案，但是您将面临另一个主要问题！ 流体行为如何？ 您可能不知道最后一行的高度和第一行的高度，因为您正在使用流体模板。

因此，这就是必须使用jQuery进行计算并计算最后一行的高度以及spacer元素的高度的地方。 从我的角度来看，没有其他方法可以解决此问题。

因此，我为您提供了一些示例，只是为了给您一个想法：

jQuery的：

    $(document).ready(function () {
        setSizes();
    });

    $(window).resize(function () {
        setSizes();
    })

    function setSizes() {
        var lastRowHeight = $("div.last-container").height();
        $("div.spacer").height(lastRowHeight);
        $("div.last-container").css({ marginTop: -(lastRowHeight) });
        $("div.full-height-container").css({ paddingTop: lastRowHeight });
    }

您可以更改它以使其更有效！

现在，将它们放在一起：

查看资料

中行高度适合twitter-bootstrap网格系统

问题描述

1 个解决方案

解决方案1
0 2014-10-26 06:06:46

中行高度适合twitter-bootstrap网格系统

问题描述

1 个解决方案

解决方案1 0 2014-10-26 06:06:46

解决方案1
0 2014-10-26 06:06:46