bootstrap-4.5.3 bitte um Hilfe

[Orac]

Hallo,
ich möchte folgendes erreichen


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


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 ?

<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 -->

html,body{
    height:100%;
}




body {
    background-color: #21528d;
    }

 

[jonas3344]

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.

height: calc(100% - Xpx - Ypx);

 

[jonas3344]

Das wäre dann nochmals eleganter. :)

 

[Orac]

Danke euch beiden.