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

Question

I am shohel rana. 我是shohel rana。 I have been facing a problem since many days. 自很多天以来，我一直面临一个问题。 I did not find any solution of my problem. 我没有找到解决我问题的方法。

The problem is: 问题是：

I have three rows. 我有三排。 The row one height will be fit according to their content height and the row three height will be fit according to their content height. 第一行的高度将根据其内容的高度进行调整，而第三行的高度将根据其内容的高度进行调整。 But the row two will be fit according to rest of height. 但是第二行将根据其余高度进行调整。

Here is my problem that is showing in picture below: 这是我的问题，如下图所示：

在此处输入图片说明

But I need the result look like this below: 但是我需要下面的结果：

在此处输入图片说明

HERE IS THE PLUNKER 这是苦行僧

HTML: 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 adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem ROW2 COLUMN1 ROW3 COLUMN1 ROW3 COLUMN2 Lorem ipsum dolor sit amet Consectetur adipiscing elit Integer molestie lorem at massa Facilisis in pretium nisl aliquet Nulla volutpat aliquam velit Phasellus iaculis neque Purus sodales ultricies Vestibulum laoreet porttitor sem Ac tristique libero volutpat at Faucibus porta lacus fringilla vel Aenean sit amet erat nunc Eget porttitor lorem 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: 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;
}

Precaution: 预防：

Avoid display: table, table-row, and table-cell. 避免显示：表格，表格行和表格单元格。
Avoid JavaScript code. 避免使用JavaScript代码。

Answer 1

There is a common solution for you problem which is using a spacer element (eg a div). 对于您的问题，有一个通用的解决方案是使用spacer元件（例如div）。 To integrate this element you have to change your markup a little bit. 要集成此元素，您必须稍微更改标记。

Markup: 标记：

<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>

As you can see, i wrapped all important rows in separate containers and in the full-height-container i inserted the spacerelement. 如您所见，我将所有重要的行包装在单独的容器中，并在全高容器中插入了spacerelement。 This div must have the same height as the last-row to prevent the content will be placed behind the last row. 该div必须与最后一行具有相同的高度，以防止内容被放置在最后一行的后面。

CSS: 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;
        }

Here you can see that i added additional css classes. 在这里，您可以看到我添加了其他CSS类。 A) for better readability and b) you should avoid to override native bootstrap css-classes cause this can bring you in a lot of troubles when the project grows. a）为了更好的可读性，b）您应该避免覆盖本机引导css类，因为这会在项目扩展时给您带来很多麻烦。

It is important to pass the height (100%) through the DOM elements until the row-2 otherwise the height will not be set. 重要的是，将高度（100％）通过DOM元素传递到第二row-2否则高度将不会被设置。

Also note, that now the first row is positioned absolute. 还要注意，现在第一行位于绝对位置。 This means that it will overflow the second row. 这意味着它将溢出第二行。 To avoid this you must set a padding-top to the full-height-content area. 为避免这种情况，您必须将padding-top设置为full-height-content区域。

This is a nice css solution but you will face another major problem!! 这是一个不错的CSS解决方案，但是您将面临另一个主要问题！ What about the fluid behavior?? 流体行为如何？ You may not know the height of the last row as well as the height of the first row because you are using a fluid template. 您可能不知道最后一行的高度和第一行的高度，因为您正在使用流体模板。

So this is the point where you must use jQuery for eg and calculate the height of the last-row as well as the height of the spacer element. 因此，这就是必须使用jQuery进行计算并计算最后一行的高度以及spacer元素的高度的地方。 From my point of view, there is no other way to handle this. 从我的角度来看，没有其他方法可以解决此问题。

So i made a little sample for you just to give you an idea: 因此，我为您提供了一些示例，只是为了给您一个想法：

jQuery: 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 });
    }

You can alter this to make it more efficient! 您可以更改它以使其更有效！

Now lets bring it all together: 现在，将它们放在一起：

SEE FIDDLE 查看资料

中行高度适合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