Wie kann man die Höhe der Seite in der Blaupause vergrößern?

  • Gibt es mit blueprint.css eine Möglichkeit, <div> auf die Höhe der Seite zu strecken? Ich weiß, wie man es mit reinem CSS macht, aber nichts, was ich gefunden habe, schlägt vor, es mit Blaupause zu tun. Ich habe also ein <div>, das einen Hintergrund hat, der auf halber Höhe der Seite endet (was schrecklich aussieht).

    28 September 2012
    Kenny LinskyRavi Khakhkhar
1 answer
  • Dafür gibt es keine Blueprint-Klasse, und eine kurze Grep-Anweisung zeigt, dass das erforderliche CSS nicht im Projekt angezeigt wird.

    Compass wendet es an mit einer Reihe von Stretch-Mixins . stretch-y fügt dem Element das folgende CSS hinzu:

     bottom: 0;
    position: absolute;
    top: 0;
     

    Da absolut positionierte Elemente nicht mit Floats interagieren , benötigen Sie ein &nbsp; in einem div mit dem gewünschten background-color und dem entsprechenden width (dh geben Sie die richtige span- # Klasse an).

    Das rein präsentatorische Div wirkt wie ein Hack, aber ich mag es besser als die Faux Column Methode.

    Vielleicht möchten Sie Folgendes hinzufügen:

     html, body {
        height: 100%;
    }
     

    und das Folgende für Ihren Container, um ihm eine Höhe von 100% zu geben, und die absolute Positionierung des div erfolgt innerhalb des Containers:

     min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
     

    und vielleicht sogar dieser IE-Hack , auch wenn dies möglich ist nur mit einer Fußzeile erforderlich:

     <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
    <![endif]-->
     
    09 October 2012
    Kenny LinskyRavi Khakhkhar