bootstrap-4.5.3 bitte um Hilfe

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Orac

Neues Mitglied
18 Januar 2016
25
0
1
Hallo,
ich möchte folgendes erreichen
00.png

wobei ich aber noch 2 Reihen oberhalb brauche
das das dann so ausschaut
01.png

das Problem ist aber das es nicht mehr den ganzen Bildschirm (Desktop PC und Tables) füllt sondern man muß runter Scrollen.

kann mir bitte jemand sagen wie ich das hinbekomme ?

HTML:
<div class="container h-100">
<div class="row">
        <div class="bg-info col-md-12 my-4">
         <a href="xxx">
         <img class="img-responsive" src="img/logo.png"
         data-toggle="poplogo"
         data-trigger="hover"
         data-placement="right"
         data-content="<img src='img/00.png'>&nbsp;xxx">
         </a>
        </div></div>
       
<div class="row">
    <div class="bg-warning col-md-6">
    <a href="#" class="btn btn-info" role="button">Link Button</a>
    <a href="#" class="btn btn-info" role="button">Link Button</a>
    <a href="#" class="btn btn-info" role="button">Link Button</a>
    </div>
    <div class="bg-warning col-md-6 text-right">
    <a href="#" class="btn btn-danger" role="button">Link Button</a>
    <a href="#" class="btn btn-info" role="button">Link Button</a>
    <a href="#" class="btn btn-info" role="button">Link Button</a>
    </div>
</div>
       
  <div class="row justify-content-center h-100">
    <div class="col-md-8 hidden-md-down" id="yellow">XXXX</div>
    <div class="col-md-4 bg-dark">Form Goes Here</div>
  </div>

</div> <!-- // h 100 -->

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




body {
    background-color: #21528d;
    }
 

jonas3344

Mitglied
25 Oktober 2019
78
26
18
37
Hast du mal in den Inspektor Deiner Developer-Tools geschaut?

Deine dritte row hat die Höhe 100% des Parent-Containers. Also 100% des Fensters. Du hast also die erste Row mit der Höhe X, dann die zweite mit der Höhe Y und dann noch die dritte mit der Höhe 100%. Macht 100%+X+Y.

Wie man das mit Bootstrap löst, keine Ahnung.

Variante 1:
Du gibst der ersten und der zweiten Row auch einen prozentuale Höhe und ziehst dann diese Höhe von der Höhe der dritten Row ab.

Variante 2 (wohl die bessere):
Die erste und zweite Row bekommen eine fixe Höhe (ist wahrscheinlich schon so, schau im Inspektor nach wie hoch) und die Höhe der dritten Row kannst du über calc() ausrechenn.

CSS:
height: calc(100% - Xpx - Ypx);
 
  • Like
Reaktionen: Orac

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
Ebenfalls keine Ahnung von Bootstrap aber der HTML-Inspektor zeigt sofort, dass die Höhe von 100% durch die Klasse "h-100" verursacht wird. Nehme ich das heraus, verschwindet zwar die Scrollbar aber der untere Container füllt nicht mehr den freien Raum aus.
Ein Blick in die Docu von Bootstrap zeigt jedoch, dass auch Flexlayout unterstützt wird:
Wende ich das auf den äußeren Container an:
<div class="container flex-column h-100 d-flex">
Voila, sieht es sofort aus wie gewünscht, der untere Container füllt den freien Raum aus, ohne dass Rechnen mit calc erforderlich wäre.

Allerdings bin ich kein Freund von Bootstrap und sehe keinen Vorteil darin, für Flex dort eine zusätzliche Ebene einzuziehen. Besser gleich das Original verwenden.
 
  • Like
Reaktionen: Orac und jonas3344