HTML文檔的高度不會延伸到視口的整個高度

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> 

我已經嘗試了很多不同的方法，但是html文檔不會延伸到視口的全部高度。

在尋求幫助方面有所幫助，但沒有人能夠解決。

而且堆棧上提到的所有帖子都無法解決我的問題。 通常通過使用min-height: 100%消失min-height: 100%在html上為min-height: 100% ，但這沒有用。

Answer 1

嘿，以下更改已解決您的問題

最低高度：100％； 僅在使用display：table;時有效 只是讓你知道

html, body { height: 100%; }

子元素需要繼承高度：

#page-content { height: 100%; }

請參閱隨附的代碼段。

 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>