es soll nicht hinhausragen

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

Orac

Neues Mitglied
18 Januar 2016
28
0
1
Hallo,
bei mir sieht es moment so aus
was nicht ganz richtig ist.

der weiße Hintergrund soll sich mit der linken spalte immer anpassen können wenn größer als 90 % des bildschirmes.

CSS:
html,
body {
    height: 100% !important;
    background-color: grey;
    }

.h-90 {
    height: 90% !important;
    }
    
.bg-test {
    background-color: white !important;
    }

.bg-grey {
background: linear-gradient(to bottom,#f7f7f7,#eaeaea);
    }

HTML:
<!doctype html>
<html lang="de">
<head>     
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
    <title>BS4-test</title>
      
    <link  rel="stylesheet" type="text/css" href="test/bootstrap01.css">
    <link  rel="stylesheet" type="text/css" href="test/eigen01.css">
    
    
</head>

<body>

<div class="h-100 d-flex align-items-center">
    <div class="container bg-test test-mt h-90">
    <h1 class="bg-grey">Überschrift</h1>
         <div class="row">
         <div class="text-left col-md-8 pr-md-1">
            <div class="bg-info">
            <p>Die höhe des weissen Hintergund, wird automatisch auf 90% des Bildschirms angepasst.</p>
            <p>Das ist das HTML dazu <code>html,
body {
    height: 100% !important;
    background-color: grey;
    }
    
    
    
    
.h-90 {
    height: 90% !important;
    }
    
    
    
    
  .bg-test {
    background-color: white !important;
    }</code>11111111111111111111111111111111111<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p></div>
         </div>
         <div class="text-center col-md-4 pl-md-2">
         <div class="bg-primary">rechts</div>
         </div>
        </div> <!-- // END row -->
    </div> <!-- // END container -->
</div> <!-- // END h-100 -->   
    
    
    
    
    
 <!-- Optional JavaScript
<!-- jQuery first, then Popper.js, then Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-->   
 <script src="test/js/jquery-3.4.1.js"></script>
 <script src="test/js/bootstrap.js"></script>
 
</body>
</html>


wäre sowas möglich, wenn ja wie genau ?


vielen Dank
 

Anhänge

  • Unbenannt-1.png
    Unbenannt-1.png
    39 KB · Aufrufe: 9
Werbung:
Werbung: