Bootstrap Div Höhe hält sich durch die Größe des Inhalts

Ich bin versucht, eine website mit Twitter Bootstrap, das ist im Grunde ein einziges, vertikal zentriert Spalte auf der Oberseite der hintergrund der div-container (also ich kann die Farb - /Bild-hintergrund an den Rändern).

Ich immer das Problem, wo kann ich das hintergrund-div zu füllen Sie die enter-Bildschirm, aber der zentrierte Spalte ein div legt die Höhe der Größe des Inhalts ist. Ich will, dass es immer mindestens so groß wie die Bildschirmgröße. Ich dachte, dass min-height würde dies zu tun, muss es aber nicht.

Hier ist, was es sieht aus wie jetzt gerade: (es ist nur eine test-Seite für das layout)

Bootstrap Div Höhe hält sich durch die Größe des Inhalts

Hier ist der code für:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Baileysaurus -- Dinosaurs &amp;&amp; Logic in your face!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <LINK href="header.css" rel="stylesheet" type="text/css">
    <LINK href="forum.css" rel="stylesheet" type="text/css">
    <!-- jQuery (Bootstrap requires jQuery!) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <!-- Bootstrap -->
    <LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
        media="screen">

        <!-- A file of PHP utility functions -->
        <?php
            include 'functions.php';
        ?>
</head>
<body>
    <!-- Bootstrap -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <div id='background' class='row-fluid'>
        <div class='span12'>
            <div id='site-column' class='row-fluid span10 offset1 column-wrap'>

                           <img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />

                       <hr>

                       <p>
                        Put a blog here!
                       </p>

            </div> <!-- END of outermost span12 div -->
        </div> <!-- END - "site-column" div --> 
    </div>  <!-- END - "background" div -->

</body>

</html>

CSS

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

#background
{
    position: absolute;
    top:0;
    bottom: 0;
    min-height: 100%;
    min-width: 100%;
    background-color: Gainsboro;
}

#site-column
{
    top: 0;
    bottom: 0;
    min-height: 100%;
    border-left: 2px solid;
    border-right: 2px solid;
    background-color: white;
}
.column-wrap
{
    overflow: hidden;
}

Ich versuche, die weiße Säule in das Foto zu Strecken, um den unteren Rand des Bildschirms, mindestens, auch wenn der Inhalt nicht so lange.
Jemand irgendwelche Ideen auf, was mir fehlt?

InformationsquelleAutor Mister R2 | 2013-02-14

  1. 1

    Sollten Sie auch in der Lage, fügen Sie den folgenden CSS:

    .span12 {
   height:100%;
}
    Das funktioniert eigentlich sogar besser, weil es nicht versauen jede der Positionierung von anderen Elementen durch absolute. Schön!

    InformationsquelleAutor F0rgiven

  2. 1

    Versuchen Sie, Ihre äußere <div> zu verlängern, um den unteren Rand der Seite.

    Also versuchen, diese in der css:

    .row-fluid
{
position:absolute;    
bottom:0;
}

    Und ich bin mir nicht sicher, aber haben Sie vielleicht zu bewegen, Ihren

    <script src="bootstrap/js/bootstrap.min.js"></script>

    Linie um die <head> Teil Ihrer Seite.

    Perfekt! Ihre CSS-Datei für die row-fluid Klasse arbeitete wie ein Charme. Wenn es nicht zu viel Mühe macht, würde der Geist Sie gehen mir durch, warum das funktioniert, bitte? Wäre ich extra dankbar!
    Nun, ich denke, es erklärt sich selbst 🙂 legen Sie den unteren Rand des div am unteren Rand der Seite. (sorry für das "Durcheinander" in Ihrem Dokument, btw). Wenn Ihre Seite in Höhe überschreitet, %100, Sie können auch position:fixed;

    InformationsquelleAutor marvin

Schreibe einen Kommentar