Question

我是骗子拉纳。很多天以来我一直面临着一个问题。我没有找到任何问题的解决方案。

问题是：

我有三排。第一排将按照他们的要求进行调整内容高度和行三高度将根据他们的适应内容高度。但第二排将根据其余部分进行调整高度。

以下是我的问题：

enter image description here

但我需要的结果如下所示：

enter image description here

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 在马萨的整体molestie lorem 在pretium nisl aliquet中的Facilisis 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坐下来 Eget porttitor lorem ROW2 COLUMN1 ROW3 COLUMN1 ROW3 COLUMN2 Lorem ipsum dolor坐着 Consectetur adipiscing elit 在马萨的整体molestie lorem 在pretium nisl aliquet中的Facilisis 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坐下来 Eget porttitor 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;
}

注意事项：

避免显示：table，table-row和table-cell。
避免使用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-classes，因为这会在项目增长时给你带来很多麻烦。

通过DOM元素传递高度（100％）非常重要，直到row-2，否则不会设置高度。

另请注意，现在第一行的位置是绝对的。这意味着它将溢出第二行。为避免这种情况，您必须在full-height-content区域设置填充顶部。

这是一个很好的CSS解决方案，但你将面临另一个主要问题！流体行为怎么样？您可能不知道最后一行的高度以及第一行的高度，因为您使用的是流体模板。

所以这就是你必须使用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 });
    }

您可以对其进行更改以提高效率！

现在让我们把它们放在一起：

SEE FIDDLE

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

1 个答案: