対応するdivの高さ

Question

ブートストラップを使用して角度のウェブサイトで作業していて、小さな問題が発生しました。

HTML

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

CSS：

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

私は.contentのdivがフルスクリーンサイズを取るしたい、何よりも、何も少ないです。しかし、私はすでに100vhを使用することにより、全体のスクリーンサイズ（screensize +ヘッダー）よりもわずかに多くなるように、ヘッダー要素（固定サイズ60px）を持っています。

.content divのサイズが常に正確に画面サイズになるようにCSSをフォーマットするにはどうすればよいですか？

Answer 1

あなたは以下のように.content高さから60pxあるheader heightはCALC（）CSS機能を指定するときに計算を実行することができます

、minusにCSS calc()機能を使用することができます CSSのプロパティ値。

.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

使用CSS calc()

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