[英]Zurb Foundation 4 - How to create a full height column
I'm trying to create a floating panel. 我正在尝试创建一个浮动面板。 It needs be detached from the grid and fill the entire height of the document, on the left side like SO:
它需要与网格分离并填充文档的整个高度,在左侧像SO:
My experiment so far: 我到目前为止的实验:
<div class="row left">
<div class="small-3">
<div class="panel">
Panel HTML
</div>
</div>
</div>
<div class="row">
<div class="small-6 columns"><div class="panel">Main - Content</div></div>
<div class="small-6 columns"><div class="panel">Main - Content</div></div>
</div>
Produce the following: 产生以下内容:
I'm not sure what is the best practice when using Foundation, and could not find a reference in their docs. 我不确定使用Foundation时最佳做法是什么,并且在他们的文档中找不到引用。 Appreciate the help :)
感谢帮助:)
here if found the issue https://github.com/zurb/foundation/issues/226 这里如果发现问题https://github.com/zurb/foundation/issues/226
try this jquery plugin to sync height https://github.com/ginader/syncHeight ( i didnt tried it yet) 试试这个jquery插件同步高度https://github.com/ginader/syncHeight (我还没试过)
this guy found something of a solution for the full height problem : 这家伙找到了全高度问题的解决方案:
https://gist.github.com/joanhard/6375966 https://gist.github.com/joanhard/6375966
It is also javascript based, but it's only a line of javascript compare to the use of an extra plugin... 它也是基于javascript的,但它只是一行javascript与使用额外的插件相比...
You can set position: fixed;
你可以设置
position: fixed;
on the div you want to have max-height, then set its height to a 100%. 在想要拥有最大高度的div上,然后将其高度设置为100%。 I have created a quick fiddle where you can see it in action.
我创造了一个快速小提琴 ,你可以看到它在行动。
The HTML: HTML:
<div class="row">
<div class="small-4 columns" id="sidebar">
Fixed full height
</div>
<div class="small-8 columns">
Other Content
</div>
</div>
The CSS: CSS:
#sidebar{
position: fixed;
height: 100%;
background: #222;
color: #FFF;
padding: 5px;
}
If you're using jQuery in your project, I wrote a quick wrapper for jQuery.syncHeight, which makes it easier to use, with multiple instantiation: 如果你在项目中使用jQuery,我为jQuery.syncHeight编写了一个快速包装器,它使得它更容易使用,具有多个实例化:
https://gist.github.com/replete/5728123 https://gist.github.com/replete/5728123
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.