私はレイアウトを作って、サイドバンドやサイドラインが表示されない理由がわかりません

私は新しいレイアウトを作ったけど、サイドバンドやサイドラインがあります（ "あまりにも多くのコンテンツ"とスクロールしなければならない "このサイドラインはGoogle Chromeの一番下にあります）は完全なビューポートに表示されますが、なぜ起こるのか分かりません。もし100vwから90への折り返し幅を変更すれば、右側に空白があります。ここでの画像は以下のとおりです。私はレイアウトを作って、サイドバンドやサイドラインが表示されない理由がわかりません

そしてここでは、私のコードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> 
<script src="https://code.jquery.com/jquery.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div class="wrap"> 
    <div class="el2">header</div> 
    <div class="el1">left</div> 
    <div class="el3"> 
    <div class="el5">pakk1</div> 
    <div class="el6">pakk1</div> 
    phakk 
    </div> 
    <div class="el4">footer</div> 
</div> 

</body> 
</html> 



* { 
    box-sizing: border-box; 
} 
.wrap { 
    width: 100vw; 
    height: 100vh; 
    background: grey; 



} 

.el2 { 
    width: 100vw; 
    height: 30vh; 
    background: #C2FF76; 
} 

.el1 { 
    width: 20vw; 
    height: 70vh; 
    background: blue; 
    float:left; 
} 
.el3 { 
    float:left; 
    width: 80vw; 
    height: 70vh; 
    background: red; 
} 
.el4 { 

    width: 100vw; 
    height: 13vh; 
    background: purple; 
    float:left; 
} 
.el5 { 
    width: 30vw; 
    height: 13vh; 
    background: green; 
    float:left; 
} 
.el6 { 
    width: 40vw; 
    height: 13vh; 
    background: green; 
    float:right; 
}

出典

2017-06-19 cool ice