无法调整屏幕高度100％
问题描述：
我有一个小问题，无法调整屏幕高度100％
我想我的HTML代码是100％的高度，但我无法让它工作。
这是我的屏幕的图片
我的HTML代码：
<!DOCTYPE html>
<html lang="fr" ng-app="zozoApp">
<head>
<base href="/">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zozo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet AdministrationUtilisateur' href='dev/vitrine/CSS/CerpStyle.css'>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
}
/*footer*/
.lienfooter{
color: #91003e;
text-decoration-line: underline;
}
.Gazano{
color: #ffffff;
text-decoration-line: none;
}
.lienfooter:hover{
color: white;
text-decoration-line: none;
}
.footer{
height: 75px;
background-color: #080808;
padding-top: 2%;
}
/*End footer*/
/*NavBar*/
.navbar-default .navbar-nav > li > a {
/*color: #8ABD24;*/
font-family: sans-serif;
font-size: 16px;
color: black
}
.navbar-default{
background-color: rgba(255,255,255,0.9) !important;
background-image: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(0,0,0,.075);
}
.navbar{
min-height: 91px;
}
.navbar-right {
float: right !important;
margin-right: -15px;
margin-top: 20px;
}
.navbar-default .navbar-nav > li > a span.line {
background: linear-gradient(to bottom,rgba(183,183,183,0) 13%,rgba(183,183,183,0.6) 50%,rgba(183,183,183,0) 87%);
content: "";
display: block;
position: absolute;
width: 1px;
height: 40%;
top: 30%;
right: 0;
}
/*end navbar*/
</style>
</head>
<body>
<div id="NavbarT" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="">
<img id="logo" style="max-width:171px; margin-top: -10px;margin-left:70px;" src="dev/vitrine/dd/Cerp_astera_couleur.png">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<div class="navbar-form navbar-right" ng-if="userCerp" >
<ul class="nav navbar-nav">
<li class="d"><a href="#" id="Utilisateur" ui-sref="produit" data-dir="">Accueil<span class="line"></span></a></li>
<li class="nav-item dropdown">
<a href="#" id="Utilisateur" ui-sref="panier" data-dir=""><span class="glyphicon glyphicon-shopping-cart"><lavel id="cart-badge" class="badge badge-warning"></lavel></span></a><span class="line"></span>
<div id="PopupPanier" class="dropdown-menue" aria-labelledby="navbarDropdownMenuLink" style="text-align: center">
<span id="textPopupPanier" data-dir=""></span>
</div>
</li>
<li class="nav-item dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#" id="NomClientNav">nom utilisateur</a>
<div class="dropdown-menu colordropdown" aria-labelledby="navbarDropdownMenuLink">
<a class="textdeco" ng-click="Logoff()" style="cursor: pointer" id="logoff" data-dir="">deconnection</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div ui-view></div>
<div id="footer" class="footer">
<table width="100%" style="font-size: 12px;">
<tr>
<td width="33%" style="text-align: left; padding-left: 15px;"><a class="lienfooter" href="http://www.cerp.be/PUB/CRP990.aspx#CGU">Mentions légales</a></td>
<td width="33%" style="text-align: center"><p class="Gazano"> © <?php echo Date('Y'); ?> by zozo</p></td>
<td width="33%" style="text-align: right; padding-right: 15px;" ><a class="lienfooter" href="http://www.cerp.be/PUB/CRP990.aspx#CGV">Conditions générales</a></td>
</tr>
</table>
</div>
</body>
</html>
我只想填写的空白，并把页脚底部，为每个画面
我已经测试HTML和身高100％但没有任何工作
答
您可以页脚position:absolute并添加position:relative到身体。它还有助于将padding-bottom添加到页脚高度的身体。
body{
position: relative;
/* padding-bottom: the height of the footer */
}
.footer{
height: 75px;
background-color: #080808;
padding-top: 2%;
position: absolute;
bottom: 0;
}
答
尝试：
.footer{
height: 75px;
background-color: #080808;
padding-top: 2%;
position:relative;
bottom:0px;
}
答
我发现这个CodePen，如果你想在页面的底部，粘页脚可能是有用的：
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
答
代码强制页脚位于页面底部。这也可能是可能的@media
html {
height: 100%;
box-sizing: border-box
/*Required to be in html*/
}
*{
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef/*Optional*/
}<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<footer>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</footer>+0
谢谢，但在另一页我需要屏幕... – Gazano
答
你可以做的是使用显示器挠性属性为你的容器来做到这一点。
然后，将flex：1设置为您的主内容部分，以便占用最大空间。
您的页脚每次都会处于最低点。
工作小提琴：
html {
min-height: 100vh;
}
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.one {
background-color: springgreen;
}
.two {
flex: 1;
background-color: antiquewhite;
}
.three {
background-color: grey;
}<div class="one">
header
</div>
<div class="two">
content
</div>
<div class="three">
footer
</div>
你的身体是100％。这只是页脚不在你身体的底部。 –
谢谢，但我怎么把页脚放在底部？ – Gazano
尝试查找“粘滞页脚” - 这是页面底部的页脚，但是如果页面高度不够高，它会粘到浏览器窗口的底部。有很多方法可以使用负边距和伪元素来做到这一点，这很好，因为您不必担心位置重叠等。 – Santi