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"> Lucy 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%
就会消失,但这不起作用。
答案 0 :(得分: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."
}
}
});
&#13;
* {
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;
}
&#13;
<!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"> Lucy 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>
&#13;