Bootstrap: Füllen ganze container unter navbar minus navbar Höhe

Auf eine Seite gestylt mit Twitter Bootstrap und mit der navbar ich wollte zu füllen, wenn der ganze container unterhalb der navigation bar, die mit einer Google-Maps-Karte. Um dies zu erreichen, habe ich die CSS im folgenden beschrieben.

Definiere ich für die html und body Elemente der Größen bis 100%, so dass dieser verwendet wird, für die map-Größe definition. Diese Lösung, allerdings, ergibt sich ein problem:

Der Karte ist die Höhe, die ist jetzt das gleiche wie die ganze Seitenhöhe, die Ergebnisse in einer scroll-bar, die ich Blättern kann für die 40px der Navigationsleiste Hinzugefügt. Wie kann ich die Größe der Karte zu 100% - 40px der Navigationsleiste?

#map {
        height: 100%;
        width: 100%;
}

#map img {
        max-width: none;
}

html, body {
        height: 100%;
        width: 100%;
}

.fill { 
        height: 100%;
        width: 100%;
}

.navbar {
        margin-bottom: 0;
}

Für die Vollständigkeit der HTML:

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
                <!-- Stylesheets -->
                <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
                <link rel="stylesheet" type="text/css" href="css/core.css">
        </head>
        <body>
                <div class="navbar">
                        <div class="navbar-inner">
                        </div>
                </div>
                <div class="container fill">
                        <div id="map"> 
                        </div>
                </div>
        </body>
</html>

InformationsquelleAutor Mahoni | 2012-08-13

  1. 24

    Du das problem lösen könnte mit absoluter Positionierung.

    .fill {
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    width: auto;
    height: auto;
}

    Demo (jsfiddle)

    Könnte man auch die navbar .navbar-fixed-top und irgendwie hinzufügen von padding oder margin im inneren des #map element.

    Bin ich im Recht, dass dieser Weg, die app ist nicht reaktionsschnell Weg mehr, als Bootstrap wechselt seine Speisekarte über die absolute positioniert map-div?
    Die Reaktionsfähigkeit ist nicht ein absoluter Zustand. Wenn dies funktioniert für Ihr layout auf kleineren/größeren Bildschirmen, dann ist es entgegenkommend. Wenn nicht, werfen in ein paar media queries und machen es Ihren Bedürfnissen passen.
    Ja, ich Stimme mit Ihnen überein, aber wenn ich die position eines Div-absolute top-40px -, standard-bootstrap-Menü Verhalten auf die kleineren Bildschirme überlappen sich mein div, wenn ich öffnen Sie das Navigations-Menü. Sorry, ich wollte nur, um herauszufinden, diese Antwort passt zu meinem layout-Anforderungen. Nur löste es auf eine andere Weise (mit Position:static)
    kannst du uns erzählen, wie du es gelöst hast mit position: static;?
    Ich Gabel Sherbrow die Geige zum erstellen einer demo enthält eine map: jsfiddle.net/wrv369/hy14wepf

    InformationsquelleAutor Sherbrow

Schreibe einen Kommentar