Twitter Bootstrap-3 - max-Höhe, benutzerdefiniertes layout

Ich habe so etwas wie dieses:

+-------------------------------------------+
|             -- navigation --              |
+------+------------------------------------+
|      |                                    |
| left |                                    |
| side |                                    |
| with |                                    |
| affix|           -- content (white) --    |
| menu |                                    |
|-black|                                    |
|      |                                    |
|      |                                    |
|      +------------------------------------+
|      |           -- footer (white) --     |
+------+------------------------------------+

als mein layout in TB 3.0, und einige code:

<body>
    <header>
        <div class="row">
            <div class="col-md-12>-- navigation (height = 50px) here --</div>
        </div>
    </header>

    <div class="row">
        <div class="col-md-4">-- left side with black background here --</div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12">-- content with white background here --</div>
            </div>

            <div class="row">
                <div class="col-md-12">-- footer (height = 50px) with white background here --</div>
            </div>
        </div>
    </div>
</body>

Möchte ich meine Links (mit schwarzen hintergrund) und Inhalt (weisser hintergrund) mit height = 100% von meinem browser Fenster-und Fußzeile (weißer hintergrund) unter " meine Inhalte sichtbar sein (auch auf Blättern).

Für jetzt, bekomme ich die Höhe des letzten Elementes von der Seite. Wenn mein Inhalt ist kurz, Sie endet etwa in der Mitte der vertikalen Seite von meinem browser.

Hier ist es: http://codepen.io/anon/pen/FxImy

Mann, es ist wirklich verwirrend versuchen zu Folgen alle, die durch die Art und Weise der Erklärung, können Sie werfen einige code auf codepen.io und link, um es?
Ich bin so traurig 🙂 ich vergaß. Ich bearbeitet meine Frage, die ich nicht Hinzugefügt, link am Ende.

InformationsquelleAutor mrzepinski | 2013-10-25

  1. 11

    Reine CSS-Lösung (mit calc)

    Wenn Sie verwenden können, CSS3, und diese 50px Höhe ist statisch, die Sie verwenden können calc erreichen Sie Ihr layout.

    Hier ein DEMO

    HTML

    <header>
        Header
</header>
<div id="Container">
    <div id="Left">I'm in the left menu</div>
    <div id="Right">
        <div id="Content">Content</div>
        <footer>Footer</footer>
    </div>
</div>

    CSS

    *
{
    padding: 0;
    margin: 0;
}
html, body
{
    height: 100%;
}

header, footer
{
    height: 50px;

    background-color: yellow;
    text-align: center;
}
#Container, #Content
{
    height: calc(100% - 50px);
    overflow: auto;
}
#Left, #Right
{
    height: 100%;
}
#Left
{
    float: left;
    background-color: black;
    color: white;
}
#Right
{
    overflow: auto;
}

    Wenn die Höhe ist nicht statisch, ich habe eine andere Lösung für Sie ist, dass ich zeigen hier es ist nicht wirklich dein layout, aber es kann getan werden, auf die gleiche Weise.

    CSS3+calc - ich Liebe es!
    Nur ein detail: "Fotter" sollte "Fußzeile"... 🙂
    Fix..

    InformationsquelleAutor avrahamcool

  2. 1

    Sehen, ob dieses Beispiel hilft Ihnen aus: http://bootply.com/87811

    Es im Grunde wickelt sich die Spalten in einem Behälter, setzt 100% Höhe, und lässt die navbar, sidebar und footer position:fixed

    Aber top-navigation und footer werden sollte Scrollbar. Es kann nicht behoben werden 🙂

    InformationsquelleAutor Zim

  3. -1

    Dein problem scheint die Fußzeile nur? (oder Inhalt Höhe).
    Legen Sie die Fußzeile fixiert /sticky ( http://getbootstrap.com/examples/sticky-footer/ ), wenn Ihr Inhalt ist zu klein von jquery.

    etwas wie:

    css von http://getbootstrap.com/examples/sticky-footer/sticky-footer.css:

    html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
.footerfixed {
  height: 60px;
  background-color: #f5f5f5;
}

    javascript:

     if ($(window).height() > ($('#content').innerHeight() + $('#navigation').innerHeight() + $('#footer').innerHeight() ))
{
    $('#content').addClass('wrap');
    $('#footer').addClass('footerfixed');
}

    Ihre scheint keine (oder sehen: stackoverflow.com/a/17582746/1596547) Reine CSS-Lösung um dies zu beheben, finden Sie unter: Sticky-header, sticky footer (variable Höhe), fluid-Mitte?

    InformationsquelleAutor Bass Jobsen

Schreibe einen Kommentar