0
HTML-Dokument Höhe nicht auf die volle Höhe des Ansichtsfenster
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>habe ich versucht, viele verschiedene Dinge strecken, aber das HTML-Dokument wird nicht auf die volle Höhe des Darstellungs strecken.
Ich suchte nach Hilfe in gitter, aber niemand war in der Lage, es zu lösen.
Und keiner der auf dem Stapel genannten Beiträge konnte mein Problem lösen. Normalerweise geht das mit min-height: 100% auf HTML, aber das hat nicht funktioniert.
Haben Sie versucht, vh mit? 'Höhe: 100vh' –
ja. Ich habe es versucht, aber nicht funktioniert. –
Als ich zu Ihrem Code-Snippet gegangen bin, habe ich auf run geklickt, dann auf den ganzen Bildschirm geklickt und mir das Styling auf '
' angeschaut, da war nichts drauf. Dann fügte ich 'height: 100vh' hinzu und der Körper streckte die gesamte Höhe des Ansichtsfensters. –