Question

我有一个与backbone.js一起工作的现有项目，我不得不使用基础做前端（我没有做骨干部分）。因为它是一个两列博客类型的网站，当然我需要侧边栏和内容列始终具有相同的高度。我有三个问题：

当我使用基础时你可能已经猜到了，这是一个响应式设计，其中列具有动态宽度
使用主干需要高度相等的列不会出现在加载/文档就绪时，它们将在登录完成后出现并由主干附加到DOM。（我有一个空的div，其中骨干附加了所需的东西）
此外，侧边栏包含一个项目列表，点击这些项目时，它们会从侧边栏中消失并显示在内容区域上，从而在用户点击此时更改列的高度。

我尝试了一些脚本无济于事，因为在它们实际出现在DOM上之后我永远无法改变列的高度（我不知道怎么做？）而且我害怕css的做法这将破坏我的响应式布局/当数字3正在发生时不起作用。

这是我的html，当它被加载时很简单：

<div class="row home collapse">
    <div class="large-5 columns sidebar home-column">
    </div>
    <div class="large-7 columns content home-column">
    </div>
</div>

Answer 1

如果您已经在使用像Foundation这样的框架，那么不确定这是否是一个很好的解决方案;但请查看此文章：Equal Height Columns - Cross Browser。

另一种解决方案是使用背景颜色;但是，它取决于CSS3。举个例子：

.container{
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #aaa), color-stop(66.7%, #aaa), color-stop(66.7%, #333), color-stop(100%, #333));
  background-image: -webkit-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -moz-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -ms-linear-gradient(left, #aaa 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: -o-linear-gradient(left, transparent 0, #aaa 66.7%, #333 66.7%, #333 100%);
  background-image: linear-gradient(left, #aaa 0%, #aaa 66.7%, #333 66.7%, #333 100%);
}

.container:after{
  display: table;
  float: none;
  content: "";
}

.container .column1{
  max-width: 66.7%;
  width: 100%;
  float: left;
}

.container .column2{
  max-width: 33.3%;
  width: 100%;
  float: left;
}

百分比应与块大小相同。该示例适用于两列。这是因为您的标记与此类似：

<div class="container">
  <div class="column1">
    <p>Some content</p>
  </div>
  <div class="column2">
    <ul>
       <li>Some Items</li>
       <li>Some Items</li>
    </ul>
  </div>
</div>

具有基础4和backbone.js的等高柱

1 个答案: