Question

我正在构建一个包含两列的Twitter-Bootstrap站点：一个窄边列和一个主文章列。在每个页面上，列的宽度是固定的，高度取决于它们内部的宽度。侧柱的高度始终必须与主柱的高度匹配，但主柱的高度是可变的。在某些页面上，主列很短，因为里面的文章不多，而在其他页面上它的高度要长得多。当主柱的高度高于侧柱的高度时，侧柱的高度会增加。

我的问题是，在不使用CMS的情况下，实现此目的的最佳方法/技术是什么？我正在考虑课程，也许是砌筑CSS的东西...但不太确定从哪里开始。对于较小的屏幕版本，我打算将它们对齐为一列，因此不需要完全响应。

我已经准备好了我想要完成的事情：

enter image description here

Answer 1

所以，你可以使用flex-box。您的HTML看起来像这样：

if ([[UIScreen mainScreen] bounds].size.height == 480)
    {
        // iPhone, iPod Touch
    }
    if ([[UIScreen mainScreen] bounds].size.height == 568) {
        // iPhone 5
    }
    if ([[UIScreen mainScreen] bounds].size.height ==  667) {
        // iP6
    }
    if ([[UIScreen mainScreen] bounds].size.height ==  736) {
        // iP6+
    }
    if ([[UIScreen mainScreen] bounds].size.height == 1024) {
        // iPad
    }

你的CSS：

<div class="flex-container">
    <div class="flex-column">
        <!-- Left column content goes here -->
    </div>
    <div class="flex-column">
        <!-- Longer right column content goes here -->
    </div>
</div>

对flexbox的支持是有限的，但在这里它是最好的解决方案。 http://caniuse.com/#feat=flexbox

<强>更新

以下是显示实施实施的JSFiddle。

Answer 2

除了flexbox选项 - 如果我不想要完全跨浏览器兼容性，我肯定会选择它 - 如果它小于内容高度，你可以使用一些JavaScript或jQuery设置侧面高度

在行动here中查看！您可以通过从内容中删除虚拟文本来尝试它。

JavaScript的：

var contentHeight = document.getElementById('content').offsetHeight;
var sideHeight = document.getElementById('side').offsetHeight;

if (contentHeight > sideHeight) {
  document.getElementById('side').style.height=contentHeight+'px';
}

HTMLElement.offsetHeight 只读属性是元素的高度，包括垂直填充和边框（以像素为单位），为整数。

还有clientHeight，您可以根据具体情况使用它：

Element.clientHeight 只读属性返回元素的内部高度（以像素为单位），包括填充，但不包括水平滚动条高度，边框或边距。

jQuery的：

var contentHeight = $(".content").height();
var sideHeight = $(".side").height();
var side = $(".side");
if (contentHeight > sideHeight) {
  side.height(contentHeight);
}

Answer 3

如果你能逃脱它，我建议使用flex box。如果没有，这是一个CSS解决方案http://plnkr.co/edit/geevZTdUy4PDEJqvNHmp?p=preview

HTML：

<body>
  <div class="container">
    <div class="row eq-row">
      <div class="col-xs-4 eq-col red">This is the first col</div>
      <div class="col-xs-8 eq-col blue">
        This is the main col<br />
        This is the main col<br />
        This is the main col<br />
        This is the main col<br />
        This is the main col<br />
        This is the main col<br />
        This is the main col<br />
        This is the main col<br />
        This is the main col<br />
      </div>
    </div>
  </div>
</body>

这是CSS。

.red
{
  background-color: red;
}

.blue
{
  background-color: blue;
}

.eq-row
{
  overflow: hidden;
}

.eq-col
{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

如何让两个集装箱高度匹配？

3 个答案: