Wrap Bootstrap-Container in einem Col, 100% Höhe

Ich verwende die Bootstrap .container Klasse, um den Inhalt auf dem Bildschirm zu zentrieren und seine Breite an etwas für das Ansichtsfenster geeignet zu beheben. Das ist in Ordnung, aber jetzt möchte ich diesen Container in eine einzelne, zentrierte Spalte mit 100% Höhe einpacken. Ich möchte, dass die Höhe mindestens 100% des Darstellungsbereichs beträgt. Es sollte erweitert werden, wenn der Inhalt nicht auf einem einzelnen Bildschirm behoben wird.Wrap Bootstrap-Container in einem Col, 100% Höhe

Ich habe allgemeine Lösungen untersucht, die die Höhe des html und body Elements auf mindestens die Höhe des Bildschirms festlegen, aber diese scheinen nicht in Bootstrap funktionieren. Ich vermute, dass es etwas mit Box-Sizing-Set zu Rand-Box zu tun hat. Hier

ist ein Beispiel für den HTML-Code:

<div class='my-col'> 
    <div class='container'> 
    <p>My content goes here</p> 
    </div> 
</div

Quelle

2017-01-03 Kim Prince

Verwendung min-height: 100vh für Ihren Behälter und warum zu halten Containerseite col.? –

Verwendung min-height: 100vh.

vh ist eine Viewport-Einheit: 1 Vh entspricht 1% der Höhe des Displays.

Quelle

2017-01-03 06:29:19

Ich weiß nicht, ob das wirklich Ihnen hilft. Ich kann keinen Bootstrap in diese Geige legen, ich weiß einfach nicht wie ich das machen soll. Also tust du das bitte auf deiner eigenen Konsole, ich habe diesen Trick gemacht, um meinen Inhalt 100% hoch zu bekommen.

hier gehen wir:

html{ 
 
margin:0; 
 
height:100%;} 
 
body{ 
 
display:flex; 
 
flex-direction:column; 
 
height:100%; 
 
padding:0; 
 
margin:0; 
 
background:yellow; 
 
} 
 

 
header{ 
 
flex:0 1 80px; 
 
background:#ddd; 
 
} 
 
section#containerWrap{ 
 
flex:1 1 auto; 
 
height:100%; 
 
display:flex; 
 
align-items:center; 
 
justify-content:center; 
 
flex-direction:column; 
 
background:#ccc; 
 
position:relative; 
 
} 
 
section#containerWrap .container{ 
 
height:100%;} 
 
footer{ 
 
flex:0 1 40px; 
 
    background:#999; 
 
}

<body> 
 
<header>header is about nav and logo</header> 
 
<section id="containerWrap"> 
 
    <div class="container"> 
 
    <p>very long content should be flexible in here</p> 
 
    <p>very long content should be flexible in here</p> 
 
    <p>very long content should be flexible in here</p> 
 
    </div> 
 
</section> 
 
<footer>the footer, website map, and more like contact us</footer> 
 
</body>

es Fußzeile absolut im unteren Bereich des Bildschirms eingestellt werden, müssen Sie nicht die Fußzeile es sich von selbst einstellen müssen absolute oder fest zu positionieren Was ich getan habe ist, dehne ich den Container und nehme den Rest der Höhe von Kopf und Fuß.

vielleicht kann ich es sagen, so etwas wie dieses

container height - (header height + footer height).

wünschte, es wird Ihnen helfen.

Quelle

2017-01-03 06:43:09 Obink

versuchen, diesen Code für Ihr Problem

body,html{ 
 
    height:100%; 
 
} 
 

 
.my-col{ 
 
    height:100%; 
 
    background:green; 
 
} 
 

 
.container{ 
 
    height:100%; 
 
    background:gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" /> 
 
<div class='my-col'> 
 
    <div class='container'> 
 
    <p>My content goes here</p> 
 
    </div> 
 
</div

einen Blick codepen auf auch

http://codepen.io/anon/pen/jyObgP#anon-login

Quelle

2017-01-03 06:48:17

Wrap Bootstrap-Container in einem Col, 100% Höhe

Antwort

Verwandte Themen