基础上的全高柱
Posted
技术标签:
【中文标题】基础上的全高柱【英文标题】:Full height columns on Foundation 【发布时间】:2014-02-21 18:03:24 【问题描述】:我正在使用 Foundation 5 Framework,需要创建 3 个相同高度的列。
第二列包括 2 个面板,我需要将所有列拉伸到全高(在第二列中,只有第二个面板拉伸到全高)。
有什么想法吗?我不想为此使用块网格。
我的代码:
<div class="row">
<div class="small-12 medium-4 columns">
<div class="panel">
<!-- here comes the content--->
</div>
</div>
<div class="small-12 medium-4 columns">
<div class="panel">
<!-- here comes the content--->
</div>
<div class="panel">
<!-- here comes the content--->
</div>
</div>
<div class="small-12 medium-4 columns">
<div class="panel">
<!-- here comes the content--->
</div>
</div>
</div>
【问题讨论】:
【参考方案1】:对于寻找这个的其他人,它现在作为均衡器内置在 Foundation 中 http://foundation.zurb.com/docs/components/equalizer.html
来自他们的文档:
您可以使用一些数据属性创建一个等高的容器。将
data-equalizer
属性应用于父容器。然后将data-equalizer-watch
属性应用于您希望具有相同高度的每个元素。data-equalizer-watch
属性的高度将等于最高元素的高度。
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>
【讨论】:
【参考方案2】:解决方案
我能够使用 jQuery 同步高度的唯一解决方案来自 joanhard on GitHub,在 a Foundation 4 thread on *** 中引用。
我已经把它扔进了 codepen,http://codepen.io/anon/pen/zgnBE。这是完整的来源。
HTML
<div class="main">
<div class="full-height row " >
<div class="full-height small-12 medium-4 columns " >
<div class="full-height-panel panel " >
<!-- here comes the content--->
hello
</div>
</div>
<div class="full-height small-12 medium-4 columns ">
<div class="panel">
<!-- here comes the content--->
hi
</div>
<div class="panel">
<!-- here comes the content--->
hi2
</div>
</div>
<div class="small-12 medium-4 columns">
<div class="panel">
<!-- here comes the content--->
holla
</div>
</div>
</div>
</div>
CSS
html, body
height: 100% !important;
padding: 0px;
margin:0;
.full-height
display:table;
.full-height-panel
display:table-cell;
javascript
$(document).foundation();
$(".full-height").height($(".main").parent().height());
没有 jQuery
我在panel
、column
、row
、body
到HTML
元素的所有元素上尝试了height:auto;
和height:100%;
。由于填充或边距,唯一的工作结果产生了滚动溢出。我尝试消除它们,但这需要更长的时间来调试。
【讨论】:
谢谢它的工作!无论如何,在 IE8 上保持基础工作就像一场噩梦。【参考方案3】:在基础(使用 EM 到 PX 转换)中,他们的主要变化在:640px(堆叠所有大/中-6)。所以使用像这样的 div,用火的 CSS 来制作它们
<div class="row equalized-to">
<div class="large-6 medium-6 columns">
<div class="panel full-height">
把这个放在最后:
if($(window).width()>640) //if not stacked(no need for height)
$(".full-height").height($(".equalized-to").height()); //find row height and apply it to all columbs by adding styles
【讨论】:
【参考方案4】:<div class="about-us">
<div class="row">
<div class="columns medium-4">
<div class="like">CONTENT 1</div>
</div>
<div class="columns medium-4">
<div class="like">CONTENT 2</div>
</div>
<div class="columns medium-4">
<div class="like">CONTENT 3</div>
</div>
</div>
</div>
CSS
<style>
.row
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.like
height:100%;
</style>
添加内部 div
【讨论】:
以上是关于基础上的全高柱的主要内容,如果未能解决你的问题,请参考以下文章