responsive Höhe von div

Question

Arbeiten auf einer eckigen Website mit Bootstrap und stieß auf ein kleines Problem.

HTML

<div class="container-fluid"> 
    <div class="row"> 
    <div class="content"> 
     random text 
    </div> 
    </div> 
</div> 

css:

.content { 
    width: 100vw; 
    height: 100vh; 
} 

Ich möchte die .content div weniger die volle Bildschirmgröße, nicht mehr und nicht zu übernehmen. Allerdings habe ich bereits ein Header-Element (feste Größe 60px) darüber, so dass mit 100vh etwas mehr als die gesamte Bildschirmgröße (screensize + header) machen.

Wie kann ich meine CSS so formatieren, dass die .content div wird immer eine Höhe von genau der Bildschirmgröße?

Answer 1

Sie CSS calc() Funktion minus die header height die

, wie unten 60px von .content Höhe verwenden könnte

CALC() CSS-Funktion können Sie Berechnungen durchführen, wenn die Angabe CSS-Eigenschaftswerte.

.content { 
    width: 100vw; 
    height: calc(100vh - 60px); /*Add this*/ 
} 

body { 
 
    margin: 0; 
 
} 
 

 
header { 
 
    background: red; 
 
    height: 60px; /* Take this value and mius below using calc()*/ 
 
    color: #fff; 
 
} 
 

 
.content { 
 
    width: 100vw; 
 
    height: calc(100vh - 60px); /*Add this*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<header>Header</header> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="content"> 
 
     random text 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Verwenden CSS calc()

.content { 
     width: 100vw; 
     height: calc(100vh - 60px); 
    }