無法調整屏幕高度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％但沒有任何工作

來源

2017-06-02 Gazano

你的身體是100％。這只是頁腳不在你身體的底部。 –

謝謝，但我怎麼把頁腳放在底部？ – Gazano

嘗試查找「粘滯頁腳」 - 這是頁面底部的頁腳，但是如果頁面高度不夠高，它會粘到瀏覽器窗口的底部。有很多方法可以使用負邊距和僞元素來做到這一點，這很好，因爲您不必擔心位置重疊等。 – Santi

您可以頁腳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; 
}

來源

2017-06-02 14:23:00 mhatch

我認爲您擁有複製/將問題粘貼到您的代碼中。我繼續編輯它，很抱歉，如果我錯誤地表達了你的意圖（我是以你的開頭句子爲基礎的）。 –

感謝它與你合作代碼：D – Gazano

@RatherNotsay是的，你是對的。 – mhatch

嘗試：

.footer{ 
     height: 75px; 
     background-color: #080808; 
     padding-top: 2%; 
     position:relative; 
     bottom:0px; 
}

來源

2017-06-02 14:19:44 tech2017

我發現這個CodePen，如果你想在頁面的底部，粘頁腳可能是有用的：

.footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: #efefef; 
    text-align: center; 
}

https://codepen.io/cbracco/pen/zekgx

來源

2017-06-02 14:21:11 Kaya

代碼強制頁腳位於頁面底部。這也可能是可能的@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>

來源

2017-06-02 14:24:32

謝謝，但在另一頁我需要屏幕... – 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>

來源

2017-06-02 14:35:20

無法調整屏幕高度100％

回答

相關問題