All geek questions in one place

Zurb Foundation 4 - How to Create a Full Height Column

I am trying to create a floating panel. You need to separate it from the grid and fill the entire height of the document, on the left side, like SO:

enter image description here

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>

Do the following:

enter image description here

I'm not sure what is the best practice when using Foundation and cannot find the link in my docs. Appreciate the help :)

+6
source share
4 answers

here if question found https://github.com/zurb/foundation/issues/226

try this jquery plugin for height sync https://github.com/ginader/syncHeight (I haven't tried it yet)

+1
source

this guy found something like solving a problem with full height:

https://gist.github.com/joanhard/6375966

It is also based on javascript, but it is only a javascript string compared to using an additional plugin ...

+1
source

You can set position: fixed; on the div you want to have maximum height, and then set its height to 100%. I created a quick fiddle where you can see it in action.

HTML:

 <div class="row"> <div class="small-4 columns" id="sidebar"> Fixed full height </div> <div class="small-8 columns"> Other Content </div> </div>

CSS:

 #sidebar{ position: fixed; height: 100%; background: #222; color: #FFF; padding: 5px; }
+1
source

If you use jQuery in your project, I wrote a short wrapper for jQuery.syncHeight, which simplifies its use with multiple instances:

https://gist.github.com/replete/5728123

0
source

Source: https://habr.com/ru/post/949448/

More articles:


All Articles