等高线柱与基础4和backbone.js

我有一个与backbone.js一起工作的现有项目，我不得不使用基础做前端（我没有做它的骨干部分）。现在它是一个双列博客类型的网站，当然我需要侧栏和内容列始终保持相同的高度。我有三个问题：等高线柱与基础4和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>

来源

2013-05-09 Elaine Marley

的DUP：http://stackoverflow.com/questions/2619813/jquery-equal-height-divs，http://stackoverflow.com/questions/11688250/设置等于高度为divs与jquery，http：//stackoverflow.com/questions/7053688/jquery-equal-height-columns ...和更多 – elclanrs 2013-05-09 07:56:27

再次阅读我的问题，你会知道为什么它是不是重复的，那些答案在我的情况下不起作用 – 2013-05-09 08:03:04

我读过它，我不明白Backbone和Foundation如何处理实际问题，即获得相同大小的列。只要您在DOM中的所有内容都运行时运行该脚本，它就可以工作。每次添加或删除内容时，您可能不得不重新运行它，但这就是它。 – elclanrs 2013-05-09 08:05:14

不知道这是否是，如果你已经在使用像基金会的框架良好的修复;但请检查这篇文章：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>

来源

2013-08-14 16:21:29 Seed

等高线柱与基础4和backbone.js

回答

相关问题