Toute la hauteur des colonnes sur la Fondation

Je suis à l'aide de la Fondation 5 Cadre et de la nécessité de créer 3 colonnes de même hauteur.

Deuxième colonnes comprend 2 panneaux, j'ai besoin d'étirer toutes les colonnes à la pleine hauteur (dans la deuxième colonne, il y aura juste le deuxième panneau tendu à pleine hauteur).

Une idée? Je ne veux pas utiliser le bloc de la grille pour cela.

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

OriginalL'auteur xtomeek | 2014-02-21

Solution

La seule solution que j'ai été en mesure de mettre en œuvre utilise jQuery pour synchroniser la hauteur est de joanhard sur GitHub, référencé dans une Fondation 4 thread sur stackoverflow.

Que j'ai jeté dans codepen, http://codepen.io/anon/pen/zgnBE. Voici le code source complet.

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

Sans jQuery

J'ai essayé height:auto; et height:100%; sur tous les éléments de la panel, column, row, body à la HTML élément. Seul le résultat produit de défilement de débordement en raison de rembourrage ou de marges. J'ai essayé de les éliminer, mais ce serait prendre plus de temps à déboguer.

merci ça marche!!! de toute façon, en gardant les travaux de fondation aussi sur IE8 est comme cauchemar.

OriginalL'auteur insignificant zebra

9

Pour quiconque cherche à cela, c'est maintenant intégré à la Fondation comme l'Égaliseur
http://foundation.zurb.com/docs/components/equalizer.html

De leurs docs:

Vous pouvez créer une hauteur égale conteneur à l'aide de quelques attributs de données. Appliquer le data-equalizer attribut à un conteneur parent. Puis appliquer le data-equalizer-watch attribut pour chaque élément que vous aimeriez avoir une hauteur égale. La hauteur de data-equalizer-watch attribut sera égal à celui du plus grand élément.
```
<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>
```
OriginalL'auteur Matt

Dans la fondation (à l'aide d'un EM à l'PX de conversion) leur changement majeur de feu: 640px(pile toutes les grandes/moyennes-6). Donc, en utilisant les divs de ce genre, le CSS avec le feu et de les rendre

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

Mettre ceci à la fin:

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
}

OriginalL'auteur 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>

ajouter intérieure div height="100%"

OriginalL'auteur RamNiwas Sharma

Vous devez vous connecter pour publier un commentaire.