HTML document height won't stretch to full height of viewport

Question

 var facebook = angular.module("myFacebook", []); facebook.controller("MessengerCtrl", function($scope) { $scope.chatList = [{ img: "assets/img/person.jpg", name: "Bruce Dickinson" }, { img: "assets/img/person.jpg", name: "Steven Wilson" }, { img: "assets/img/person.jpg", name: "Joe Satriani" }, { img: "assets/img/person.jpg", name: "Bob Dylan" }, { img: "assets/img/person.jpg", name: "Billie Holiday" }, { img: "assets/img/person.jpg", name: "Paul Simon" }, { img: "assets/img/person.jpg", name: "Mikael Arkelfedt" }, { img: "assets/img/person.jpg", name: "Slash" }, { img: "assets/img/person.jpg", name: "John Petrucci" }, { img: "assets/img/person.jpg", name: "Dave Grohl" }, { img: "assets/img/person.jpg", name: "Steve Morse" }]; }); facebook.controller("InfoCtrl", function($scope) { $scope.groups = [ { img: "assets/img/person.jpg", name: "Opeyes" }, { img: "assets/img/person.jpg", name: "Porcuyes" }, { img: "assets/img/person.jpg", name: "Pinkyes" } ]; $scope.bdays = ["assets/img/person.jpg","assets/img/person.jpg","assets/img/person.jpg","assets/img/person.jpg"]; $scope.favs = [ { img: "assets/img/person.jpg", name: "Opeth" }, { img: "assets/img/person.jpg", name: "Iron Maiden" }, { img: "assets/img/person.jpg", name: "Dream Theater" } ] }); facebook.controller("PostCtrl", function($scope){ $scope.posts = { post1: { img: "assets/img/image1.jpg", name: "My mind when I listen to Prog Rock.", intro: "Somone painted beautiful painting of what goes on inside my brain while I am listening to Prog Rock." }, post2: { img: "assets/img/image2.jpg", name: "And 30 years of magic that is Geddy's voice.", intro: "I thank the masters of prog rock for enriching our lives with their music." }, post3: { img: "assets/img/image3.jpg", name: "The hand that produces magic.", intro: "Another ornament that I found in the quest of epic band photos." }, post4: { img: "assets/img/image4.jpg", name: "Pink Floyd is love. Pink Floyd is life", intro: "I was browsing images for prog rock, and look at this beauty that I found." } } }); 

 * { box-sizing: border-box; } html { min-height: 100%; margin: 0; padding: 0; } body { height: 100vh; margin: 0; padding: 0; } #page-wrap { display: flex; flex-direction: row; justify-content: space-between; } /*Designing the info column*/ #info { width: 17%; display: flex; border-right: 1px solid rgb(230, 230, 230); flex-direction: column; } #caret-down { display: flex; width: 26%; margin-top: 6%; margin-right: 4%; justify-content: flex-end; } #name { margin-top: 3%; } #fav, #groups, #pages, #bday { margin-left: 4%; } #fav>ul, #info>ul, #groups ul { margin-top: 0%; } #fav>h4, #info>h4, #groups>h4, #bday>h4 { margin-bottom: 2%; } #name-logo { display: flex; margin-left: 3%; margin-top: 4%; width: 68%; flex-direction: row; } #profile-head { display: flex; max-width: 100%; } /*Designing the messenger*/ #messenger { width: 20%; display: flex; flex-direction: column; border-left: 1px solid rgb(230, 230, 230); } #messenger-head { display: flex; max-width: 100%; max-height: 11%; align-items: flex-start; background: linear-gradient(to right, rgb(0, 89, 207), rgb(0, 200, 219)); border-bottom: 1px solid rgb(0, 89, 245); /*max-height: 4.5%;*/ } #messenger-logo-heading { display: flex; margin-top: 5%; margin-bottom: 5%; margin-left: 5%; margin-right: 0; box-sizing: border-box; width: 68%; flex-direction: row; } #messenger-logo-heading>h4 { padding: 0; color: white; margin: 3% 0 0 4%; } #ellipsis { display: flex; color: white; width: 26%; margin-right:5%; margin-left: 0; margin-top: 6%; margin-bottom: 5%; justify-content: flex-end; } #chat-list { margin-left: 4%; } /*Designing Content*/ #content { width: 80%; } #content-head { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; border-bottom: 1px solid rgb(230, 230, 230); } #content-search { width: 60%; margin-top: 1%; margin-bottom: 1%; display: flex; justify-content: flex-end; font-size: 0.8em; background: rgb(224, 224, 224); padding: 1%; border-radius: 0.4em; } #content-search-bar { width: 100%; border: none; background: rgb(224, 224, 224); } #content-search-bar:focus { outline: none; } #dashboard { width: 17%; margin-top: 1%; margin-right: 3%; margin-bottom: 1%; display: flex; justify-content: flex-end; } #search-icon { max-width: 20%; color: rgb(160, 160, 160); padding-left: 2%; } .dashboard-icons { padding: 0 6%; color: rgb(160, 160, 160); } /*Posting content section*/ #wall { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .fa-rotate-60 { transform: rotate(55deg); } #camera { box-sizing: box-border; border-radius: 50%; padding: 3% 3%; color: rgb(60, 60, 60); border: 1px solid rgb(226, 226, 226); background-color: #fff; } #video { box-sizing: box-border; border-radius: 100%; margin: 0 4%; padding: 3% 3%; text-align: center; max-width: 40%; color: rgb(60, 60, 60); border: 1px solid rgb(226, 226, 226); background-color: #fff; } #postit { border-radius: 50%; box-sizing: box-border; margin-right: 4%; padding: 3% 3%; border: none; max-width: 40%; color: white; background-color: rgb(70, 156, 246); } button:focus { outline: none; } ::-webkit-input-placeholder { color: rgb(160, 160, 160); text-align: center; } #write-area { padding-right: 2%; padding-left: 8%; padding-top: 2%; padding-bottom: 5%; background: rgb(224, 224, 224); max-width: 100%; border: none; overflow-y: hidden; box-sizing: box-border; } #write-area:focus { outline: none; } form { max-width: 100%; } #extra { padding: 5%; background: rgb(224, 224, 224); } #post-items { display: flex; justify-content: flex-end; margin-top: -5%; box-sizing: box-border; max-width: 100%; } #wrap { width: 60%; margin-top: 4%; display: flex; flex-direction: column; box-sizing: box-border; } #write { max-width: 100%; display: flex; flex-direction: column; position: relative; } #write-photo { position: absolute; z-index: 2; top: -5%; left: -2.5%; border-radius: 1.5em; border: 4px solid white; } ul { list-style-type: none; padding-left: 0; } a { color: black; text-decoration: none; } ul>li { display: block; vertical-align: middle; } .bday-ppl { border-radius: 0.8em; margin-left: -2.5%; border: 2px solid white; } 

 <!DOCTYPE html> <html data-ng-app="myFacebook"> <head> <meta charset="utf-8"> <title>Facebook</title> <script src="https://use.fontawesome.com/7fa60b6c2a.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js" charset="utf-8"></script> <link rel="stylesheet" href="assets/css/facebook.css"> </head> <body> <div id="page-wrap"> <aside id="info" ng-controller="InfoCtrl"> <div id="profile-head"> <div id="name-logo"> <img src="assets/img/fb-logo.png" alt="fb-logo" width="25%" height="100%"><span id="name">&nbspLucy Fur</span></div> <div id="caret-down"> <i class="fa fa-caret-down" aria-hidden="true"></i></div> </div> <div id="fav"> <h4>Favorites</h4> <ul> <li ng-repeat="fav in favs"><img ng-src={{fav.img}} alt="favorite" width="26px" class="info-logo"> {{fav.name}}</li> </ul> </div> <div id="pages"> <h4>Pages(54)</h4> <ul> <li><img src="" alt="" width="26px" class="info-logo"></li> </ul> </div> <div id="groups"> <h4>Groups(32)</h4> <ul> <li ng-repeat="group in groups"><img ng-src={{group.img}} width="26px" alt="group"> {{group.name}}</li> </ul> </div> <div id="bday"> <h4>Birthdays(5)</h4> <img ng-repeat="bday in bdays track by $index" ng-src={{bday}} alt="bday people" width="26px" class="bday-ppl"> </div> </aside> <section id="content"> <div id="content-head"> <div id="content-search"> <input type="search" name="content-search" value="" placeholder="Search Facebook" id="content-search-bar"><i class="fa fa-search fa-lg" id="search-icon" aria-hidden="true"></i> </div> <div id="dashboard"> <i class="fa fa-bell-o dashboard-icons" aria-hidden="true"></i> <i class="fa fa-comment dashboard-icons" aria-hidden="true"></i> <i class="fa fa-user dashboard-icons" aria-hidden="true"></i> </div> </div> <article id="wall"> <div id="wrap"> <div id="write"> <img id="write-photo" src="http://www.clker.com/cliparts/p/w/s/A/V/6/green-square-md.png" alt="" width="44px";/> <textarea id="write-area" placeholder="Write Something.."></textarea> </div> <div id="extra"></div> <form action=""> <div id="post-items"> <button id="camera"><i class="fa fa-lg fa-camera" aria-hidden="true"></i></button> <button id="video"><i class="fa fa-lg fa-video-camera" aria-hidden="true"></i></button> <button id="postit"><i class="fa fa-paper-plane fa-rotate-60 fa-lg" aria-hidden="true"></i></button> </form> </div> </div> </article> </section> <aside id="messenger" ng-controller="MessengerCtrl"> <div id="messenger-head"> <div id="messenger-logo-heading"> <img src="assets/img/messenger.png" alt="" width="20%" height="100%"> <h4>Messenger</h4> </div> <div id="ellipsis"> <i class="fa fa-ellipsis-v" aria-hidden="true"></i> </div> </div> <div id="chat-list"> <ul> <li ng-repeat="list in chatList"><img ng-src={{list.img}} alt="person" width="24px" id="chat-img"> <a href="#">{{list.name}}</a></li> </ul> </div> <div id="chat-search-wrap"> <div id="chat-search"> <i class="fa fa-search fa-lg" aria-hidden="true"></i><input type="search" name="chat-search" value="search" placeholder="Search"> </div> </div> </aside> </div> <script src="assets/js/app.js" charset="utf-8"></script> </body> </html> 

I have tried a lot of different things, but the html document won't stretch to full height of the viewport.

Looked for help in on gitter, but nobody was able to solve it.

And none of the posts mentioned on stack were able to solve my problem. Usually is goes away by using min-height: 100% on html, but that didn't work.

Answer 1

Hey the following changes made fixed your issue

min-height: 100%; only works when you use display: table; just to let you know

html, body { height: 100%; }

Child element needs to inherit height:

#page-content { height: 100%; }

Please see the code snippet attached.

 var facebook = angular.module("myFacebook", []); facebook.controller("MessengerCtrl", function($scope) { $scope.chatList = [{ img: "assets/img/person.jpg", name: "Bruce Dickinson" }, { img: "assets/img/person.jpg", name: "Steven Wilson" }, { img: "assets/img/person.jpg", name: "Joe Satriani" }, { img: "assets/img/person.jpg", name: "Bob Dylan" }, { img: "assets/img/person.jpg", name: "Billie Holiday" }, { img: "assets/img/person.jpg", name: "Paul Simon" }, { img: "assets/img/person.jpg", name: "Mikael Arkelfedt" }, { img: "assets/img/person.jpg", name: "Slash" }, { img: "assets/img/person.jpg", name: "John Petrucci" }, { img: "assets/img/person.jpg", name: "Dave Grohl" }, { img: "assets/img/person.jpg", name: "Steve Morse" }]; }); facebook.controller("InfoCtrl", function($scope) { $scope.groups = [ { img: "assets/img/person.jpg", name: "Opeyes" }, { img: "assets/img/person.jpg", name: "Porcuyes" }, { img: "assets/img/person.jpg", name: "Pinkyes" } ]; $scope.bdays = ["assets/img/person.jpg","assets/img/person.jpg","assets/img/person.jpg","assets/img/person.jpg"]; $scope.favs = [ { img: "assets/img/person.jpg", name: "Opeth" }, { img: "assets/img/person.jpg", name: "Iron Maiden" }, { img: "assets/img/person.jpg", name: "Dream Theater" } ] }); facebook.controller("PostCtrl", function($scope){ $scope.posts = { post1: { img: "assets/img/image1.jpg", name: "My mind when I listen to Prog Rock.", intro: "Somone painted beautiful painting of what goes on inside my brain while I am listening to Prog Rock." }, post2: { img: "assets/img/image2.jpg", name: "And 30 years of magic that is Geddy's voice.", intro: "I thank the masters of prog rock for enriching our lives with their music." }, post3: { img: "assets/img/image3.jpg", name: "The hand that produces magic.", intro: "Another ornament that I found in the quest of epic band photos." }, post4: { img: "assets/img/image4.jpg", name: "Pink Floyd is love. Pink Floyd is life", intro: "I was browsing images for prog rock, and look at this beauty that I found." } } }); 

 * { box-sizing: border-box; } html { height: 100%; /* edit made here */ margin: 0; padding: 0; } body { height: 100%; /* edit made here */ margin: 0; padding: 0; } #page-wrap { height: 100%; /* edit made here */ display: flex; flex-direction: row; justify-content: space-between; } /*Designing the info column*/ #info { width: 17%; display: flex; border-right: 1px solid rgb(230, 230, 230); flex-direction: column; } #caret-down { display: flex; width: 26%; margin-top: 6%; margin-right: 4%; justify-content: flex-end; } #name { margin-top: 3%; } #fav, #groups, #pages, #bday { margin-left: 4%; } #fav>ul, #info>ul, #groups ul { margin-top: 0%; } #fav>h4, #info>h4, #groups>h4, #bday>h4 { margin-bottom: 2%; } #name-logo { display: flex; margin-left: 3%; margin-top: 4%; width: 68%; flex-direction: row; } #profile-head { display: flex; max-width: 100%; } /*Designing the messenger*/ #messenger { width: 20%; display: flex; flex-direction: column; border-left: 1px solid rgb(230, 230, 230); } #messenger-head { display: flex; max-width: 100%; max-height: 11%; align-items: flex-start; background: linear-gradient(to right, rgb(0, 89, 207), rgb(0, 200, 219)); border-bottom: 1px solid rgb(0, 89, 245); /*max-height: 4.5%;*/ } #messenger-logo-heading { display: flex; margin-top: 5%; margin-bottom: 5%; margin-left: 5%; margin-right: 0; box-sizing: border-box; width: 68%; flex-direction: row; } #messenger-logo-heading>h4 { padding: 0; color: white; margin: 3% 0 0 4%; } #ellipsis { display: flex; color: white; width: 26%; margin-right:5%; margin-left: 0; margin-top: 6%; margin-bottom: 5%; justify-content: flex-end; } #chat-list { margin-left: 4%; } /*Designing Content*/ #content { width: 80%; } #content-head { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; border-bottom: 1px solid rgb(230, 230, 230); } #content-search { width: 60%; margin-top: 1%; margin-bottom: 1%; display: flex; justify-content: flex-end; font-size: 0.8em; background: rgb(224, 224, 224); padding: 1%; border-radius: 0.4em; } #content-search-bar { width: 100%; border: none; background: rgb(224, 224, 224); } #content-search-bar:focus { outline: none; } #dashboard { width: 17%; margin-top: 1%; margin-right: 3%; margin-bottom: 1%; display: flex; justify-content: flex-end; } #search-icon { max-width: 20%; color: rgb(160, 160, 160); padding-left: 2%; } .dashboard-icons { padding: 0 6%; color: rgb(160, 160, 160); } /*Posting content section*/ #wall { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .fa-rotate-60 { transform: rotate(55deg); } #camera { box-sizing: box-border; border-radius: 50%; padding: 3% 3%; color: rgb(60, 60, 60); border: 1px solid rgb(226, 226, 226); background-color: #fff; } #video { box-sizing: box-border; border-radius: 100%; margin: 0 4%; padding: 3% 3%; text-align: center; max-width: 40%; color: rgb(60, 60, 60); border: 1px solid rgb(226, 226, 226); background-color: #fff; } #postit { border-radius: 50%; box-sizing: box-border; margin-right: 4%; padding: 3% 3%; border: none; max-width: 40%; color: white; background-color: rgb(70, 156, 246); } button:focus { outline: none; } ::-webkit-input-placeholder { color: rgb(160, 160, 160); text-align: center; } #write-area { padding-right: 2%; padding-left: 8%; padding-top: 2%; padding-bottom: 5%; background: rgb(224, 224, 224); max-width: 100%; border: none; overflow-y: hidden; box-sizing: box-border; } #write-area:focus { outline: none; } form { max-width: 100%; } #extra { padding: 5%; background: rgb(224, 224, 224); } #post-items { display: flex; justify-content: flex-end; margin-top: -5%; box-sizing: box-border; max-width: 100%; } #wrap { width: 60%; margin-top: 4%; display: flex; flex-direction: column; box-sizing: box-border; } #write { max-width: 100%; display: flex; flex-direction: column; position: relative; } #write-photo { position: absolute; z-index: 2; top: -5%; left: -2.5%; border-radius: 1.5em; border: 4px solid white; } ul { list-style-type: none; padding-left: 0; } a { color: black; text-decoration: none; } ul>li { display: block; vertical-align: middle; } .bday-ppl { border-radius: 0.8em; margin-left: -2.5%; border: 2px solid white; } 

 <!DOCTYPE html> <html data-ng-app="myFacebook"> <head> <meta charset="utf-8"> <title>Facebook</title> <script src="https://use.fontawesome.com/7fa60b6c2a.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js" charset="utf-8"></script> <link rel="stylesheet" href="assets/css/facebook.css"> </head> <body> <div id="page-wrap"> <aside id="info" ng-controller="InfoCtrl"> <div id="profile-head"> <div id="name-logo"> <img src="assets/img/fb-logo.png" alt="fb-logo" width="25%" height="100%"><span id="name">&nbspLucy Fur</span></div> <div id="caret-down"> <i class="fa fa-caret-down" aria-hidden="true"></i></div> </div> <div id="fav"> <h4>Favorites</h4> <ul> <li ng-repeat="fav in favs"><img ng-src={{fav.img}} alt="favorite" width="26px" class="info-logo"> {{fav.name}}</li> </ul> </div> <div id="pages"> <h4>Pages(54)</h4> <ul> <li><img src="" alt="" width="26px" class="info-logo"></li> </ul> </div> <div id="groups"> <h4>Groups(32)</h4> <ul> <li ng-repeat="group in groups"><img ng-src={{group.img}} width="26px" alt="group"> {{group.name}}</li> </ul> </div> <div id="bday"> <h4>Birthdays(5)</h4> <img ng-repeat="bday in bdays track by $index" ng-src={{bday}} alt="bday people" width="26px" class="bday-ppl"> </div> </aside> <section id="content"> <div id="content-head"> <div id="content-search"> <input type="search" name="content-search" value="" placeholder="Search Facebook" id="content-search-bar"><i class="fa fa-search fa-lg" id="search-icon" aria-hidden="true"></i> </div> <div id="dashboard"> <i class="fa fa-bell-o dashboard-icons" aria-hidden="true"></i> <i class="fa fa-comment dashboard-icons" aria-hidden="true"></i> <i class="fa fa-user dashboard-icons" aria-hidden="true"></i> </div> </div> <article id="wall"> <div id="wrap"> <div id="write"> <img id="write-photo" src="http://www.clker.com/cliparts/p/w/s/A/V/6/green-square-md.png" alt="" width="44px";/> <textarea id="write-area" placeholder="Write Something.."></textarea> </div> <div id="extra"></div> <form action=""> <div id="post-items"> <button id="camera"><i class="fa fa-lg fa-camera" aria-hidden="true"></i></button> <button id="video"><i class="fa fa-lg fa-video-camera" aria-hidden="true"></i></button> <button id="postit"><i class="fa fa-paper-plane fa-rotate-60 fa-lg" aria-hidden="true"></i></button> </form> </div> </div> </article> </section> <aside id="messenger" ng-controller="MessengerCtrl"> <div id="messenger-head"> <div id="messenger-logo-heading"> <img src="assets/img/messenger.png" alt="" width="20%" height="100%"> <h4>Messenger</h4> </div> <div id="ellipsis"> <i class="fa fa-ellipsis-v" aria-hidden="true"></i> </div> </div> <div id="chat-list"> <ul> <li ng-repeat="list in chatList"><img ng-src={{list.img}} alt="person" width="24px" id="chat-img"> <a href="#">{{list.name}}</a></li> </ul> </div> <div id="chat-search-wrap"> <div id="chat-search"> <i class="fa fa-search fa-lg" aria-hidden="true"></i><input type="search" name="chat-search" value="search" placeholder="Search"> </div> </div> </aside> </div> <script src="assets/js/app.js" charset="utf-8"></script> </body> </html>