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文档不会扩展到视口的全高。

寻求在吉特（Gitter）上寻求帮助，但没有人能够解决它。

，堆栈上提到的任何帖子都无法解决我的问题。通常在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>