0
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文書は、ビューポートの完全な高さに伸びません。
ぐずぐずしているように見えましたが、誰もそれを解決できませんでした。
スタックに記載されている投稿のいずれも私の問題を解決できませんでした。通常、htmlでmin-height: 100%を使用すると消えてしまいますが、うまくいきませんでした。作っ
あなたがVHを使用してみましたか？ 'height：100vh' –
はい。私はそれを試みたが、うまくいかなかった。 –
私はあなたのコードスニペットに行ったとき、クリックして実行し、フルスクリーンをクリックして、それに何もない '
'のスタイリングを見ました。その後、私は 'height：100vh'を追加して、ボディーをビューポート全体の高さに伸ばしました。 –