Voller Höhe für die Spalten auf die Stiftung

Ich bin mit Foundation 5 Framework und erstellen müssen 3 gleiche Höhe Spalten.

Zweiten Spalten enthält 2 Tafeln, die ich brauche, um Funktion auf alle Spalten, volle Höhe (in der zweiten Spalte wird es nur zweite panel gestreckt auf die volle Höhe).

Irgendeine Idee? Ich will nicht von block-raster für diese.

Mein code:

<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>

InformationsquelleAutor xtomeek | 2014-02-21

Lösung

Die einzige Lösung, die ich war in der Lage zu implementieren, die jQuery verwendet zum synchronisieren der Höhe von joanhard auf GitHub, auf die in eine Stiftung 4 thread auf stackoverflow.

Ich geworfen haben es in codepen, http://codepen.io/anon/pen/zgnBE. Hier ist die Quelle in vollem Umfang.

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());

Ohne jQuery

Versuchte ich height:auto; und height:100%; auf alle Elemente aus der panel, column, row, body zu den HTML element. Die einzige Arbeit Ergebnis produziert scroll overflow durch Polsterung oder Ränder. Ich habe versucht, Sie zu eliminieren aber das würde länger dauern, um zu Debuggen.

danke es funktioniert! sowieso, halten Fundamentarbeiten auch auf IE8 ist wie nightmare.

InformationsquelleAutor insignificant zebra

9

Für jemand anderes suchen, für das, das ist jetzt gebaut, um Foundation als Equalizer
http://foundation.zurb.com/docs/components/equalizer.html

Von Ihren docs:

Können Sie erstellen, die eine gleiche Höhe container mit ein paar data-Attributen. Gelten die data-equalizer - Attribut des übergeordneten Containers. Dann gelten die data-equalizer-watch - Attribut auf jedes element, das Sie möchten, um eine gleiche Höhe. Die Höhe der data-equalizer-watch Attribut wird in Höhe des höchsten Elements.
```
<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>
```
InformationsquelleAutor Matt

In der Stiftung (mit einem EM-PX-Umrechnung) Ihre wesentliche änderung am Feuer: 640px(stack large/medium-6). So divs, wie diese, die CSS mit dem Feuer und machen Sie

 <div class="row equalized-to">
   <div class="large-6 medium-6 columns">
     <div class="panel full-height">

Setzen Sie diese am Ende:

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
}

InformationsquelleAutor function failHard

<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>

hinzufügen innere div height="100%"

InformationsquelleAutor RamNiwas Sharma

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.