CSS - Grid Snippets

Seitenverhältnis, volle Höhe oder feste Höhe

Beim Layout gibt es verschiedene Möglichkeiten wie man Container Elemente gestalten kann. Im einfachsten Fall passt sich die Höhe eines Elements dem Inhalt an.

In manchen Layouts möchte man z.B. das ein Bild oder ein Slider oder auch das ganze Layout die komplette Höhe des Browserfensters einnimmt. Wenn man Elemente relativ oder absolut positioniert kann man hier die 100% height Angabe verwenden. Was aber, wenn nur das oberste Element (z.B. ein Bild) den ganzen Raum einnehmen soll und trotzdem danach weitere Elemente kommen sollen. Hier gibt es verschiedene Ansätze.

Höhe eines Elements per JavaScript auf 100% einstellen

<div class="fullHeight>
  <div class="inner">
    The Content
  </div>
</div>

JavaScript (jQuery)

    /* 100 % height elements and more if inner is to big*/
    $(function(){
        var windowH = $(window).height();
        var wrapperH = $('.fullHeight').height();
        if(windowH > wrapperH) {                            
            $('.fullHeight').css({'height':($(window).height())+'px'});
        }                                                                               
        $(window).resize(function(){
            var windowH = $(window).height();
            var wrapperH = $('.fullHeight').height();
            var differenceH = windowH - wrapperH;
            var newH = wrapperH + differenceH;
            var truecontentH = $('#fullHeight .inner').height();
            if(windowH > truecontentH) {
                $('#fullHeight').css('height', (newH)+'px');
            }

        })          
    });

Aspect Ratio Divs - Seitenverhältnis einhalten

Bei Gridbasierten Layouts ist es schön, wenn die Höhe sich so der Breite anpasst, dass immer das gleiche Seitenverhältnis entsteht. So kann man schöne Raster erstellen. Mit Hintergrundbildern passt sich das Bild dann z.B. einer nebenstehenden Textbox an. Oder man kann Text in Divs unten ausrichten und hat trotzdem immer eine passende Höhe (table-cell zum unten ausrichten). Funktioniert z.B. schön in einem 4er Grid. Anwendungsbeispiele: Schlueter-kollegen.de, janna-mode.de (Stand Anfang 2017)

Dieses Beispiel ist für ein 4er Raster optimiert, bei dem man von einer Grundeinheit von 4:3 ausgeht. Will man jetzt mehrere Spalten überstreichen ergeben sich automatisch bei gleicher Höhe die nächsten Seitenverhältnisse.

/***********************************
  Aspect grid by stephanschlegel.de
************************************/
/* set height of div so that bg keeps the aspect ratio */
.stretch{ /*needs pos relative or absolute to work*/
  width: 100%;
  height: 100%;
}
.col{ background: grey;}

/*** Common ratios for 4 col grid 
(base is: one quarter has ratio 3:4) ***/
.a-3-4{ /* 3:4 Aspect Ratio */
  width: 100%;
  padding-top: 133.3333%;
  position: relative;
}
.a-6-4,
.a-3-2{
  width: 100%;
  padding-top: 66.6666%;
  position: relative;
}
.a-9-4{
  width: 100%;
  padding-top: 44.4444%;
}
.a-12-4,
.a-6-2,
.a-3-1{
  width: 100%;
  padding-top: 33.3333%;
  position: relative;
}
/* other common ratios */
.a-1-1{
  width: 100%;
  padding-top: 100%; /* Square */
  position: relative;
}
.a-4-3{
  width: 100%;
  padding-top: 75%; /* 4:3 Aspect Ratio */
  position: relative;
}
.aspect-8-5{
  width: 100%;
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
  position: relative;
}
.a-16-9{
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  position: relative;
}

/* Text positioning */
.inner{
  display: table;
  margin: 0;
  width: 100%;
  height: 100%;
}
.child a.full{
  display: table-cell;
  padding: 3%;
  vertical-align: bottom;
  text-decoration: none;
  color: inherit;
}

HTML (basiert auf materializecss grid) <syntaxhighlight lang="html5">

                 <a class="full" href="#">

Leistungen

Steuerberatung für Privatpersonen und
Unternehmen. Kompetenz aus einem
komplementären Team.

                 </a>

                 <a class="full" href="#">

Ihre
Karriere

Starten Sie mit uns durch. Wir bieten für
Sie ganz unterschiedliche Modelle zur
Ausbildung oder zum Job.

                 </a>