Bootstrap * vertikal * Reaktionsfähigkeit

Question

Aug 30, 2016, 04:59 PM

Bootstrap * vertikal * Reaktionsfähigkeit

Ohne die Breitenverwaltung an Bootstrap zu delegieren, kann ich drei Spalten mit voller Höhe erhalten

mit folgendem HTML / CSS.

<!DOCTYPE html>
<head>
    <style>
        div {
            position: fixed;
            border: 5px dashed blue;
            box-sizing: border-box;
        }
        .left {
            height: 100%; top:   0;
            width:  33%; left:   0;
        }
        .middle {
            height: 100%; top:    0;
            width:  33%; left:  33%;
        }
        .right {
            height: 100%; top: 0;
            width:  34%; left:  66%;
        }
        h2.text-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="left">
        <h2 class="text-center">Left</h2>
    </div>
    <div class="middle">
        <h2 class="text-center">Middle</h2>
    </div>
    <div class="right">
        <h2 class="text-center">Right</h2></div>
    </div>
</body>

Um Bootstrap mit den Breiten umgehen zu lassen, schrieb ich

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
        href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <style>
        body {
            min-height: 100%;
            border: 3px solid green;
        }
        .fullheight {
            min-height: 100%;
            border: 3px solid blue;
            /* position: absolute; */
        }

    </style>
</head>
<body>
    <div class="container-fluid fullheight">
        <div class="row fullheight">
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Left</h2>
            </div>
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Middle</h2>
            </div>
            <div class="col-xs-4 col-md-4">
                <h2 class="text-center">Right</h2>
            </div>
        </div>
    </div>
</body>

Schaltstellung auf Absolut funktioniert nicht in Kombination mit Bootstrap und den anderen vorherigen Diskussionen zu diesem Thema 1, 2, 3, 4) nicht helfen

Wie stelle ich die Höhe auf 100% ein, wenn die Breiten von Bootstrap verwaltet werden?

Wenn es einen Bootstrap-Weg gibt, um DIVs auf 100% Höhe zu setzen, wäre das sogar noch besser.