部分高度與引導

我希望有網站適合頁面沒有滾動。我有3個部分：標題，部分和頁腳我試過測試： row-lg-1用於該部分的頁眉和頁腳和row-lg-10，但它不起作用，任何想法？所以最後它的「部分」誰必須調整自動部分高度與引導

PS：它必須與引導來完成

我的代碼：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>La maison de l'architecte</title> 
 
    <meta name="description" content="Le site de la maison de l'architecture"> 
 

 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> 
 
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'> 
 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 

 
    <style type="text/css"> 
 

 
     /* Styles de base */ 
 
     body { 
 
     font-family: 'Bitter', serif; 
 
     background-color: #eef; 
 
     color: #259; 
 
     } 
 
     nav img { 
 
     width: 100%; 
 
     } 
 

 
     /* Styles pour les smartphones */ 
 
     #left, #side1, #side2 { 
 
     padding: 10px 10px 0 10px; 
 
     } 
 

 
     /* Styles pour les tablettes */ 
 
     @media (min-width: 768px) { 
 
     #left{ 
 
      padding: 0; 
 
     } 
 
     #side1 { 
 
      padding: 10px 5px 0 0; 
 
     } 
 
     #side2 { 
 
      padding: 10px 0 0 5px; 
 
     } 
 
     } 
 

 
     /* Styles pour les écrans moyens et grands */ 
 
     @media (min-width: 992px) { 
 
     #side1, #side2 { 
 
      padding: 0 0 10px 10px; 
 
     } 
 
     } 
 

 
    </style> 
 

 
    </head> 
 

 
    <body> 
 

 
    <header class="col-lg-12 col-md-12"> 
 
     <a href="#"><img src="assets/img/maison.png" alt="logo" class="col-lg-1 col-md-1"></a> 
 
     <h1 class="text-center">La maison de l'architecte</h1> 
 
    </header> 
 

 
    <nav class=""> 
 
     <div id="left" class="col-lg-8 col-md-8"> 
 
     <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a> 
 
     </div> 
 
     <div id="side1" class="col-lg-4 col-md-4"> 
 
     <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a> 
 
     </div> 
 
     <div id="side2" class="col-lg-4 col-md-4"> 
 
     <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a> 
 
     </div> 
 
    </nav> 
 

 
    <footer class="text-center"> 
 
     <a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a> 
 
     <a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a> 
 
     <a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a> 
 
     <a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a> 
 
     <a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a> 
 
    </footer> 
 

 
    </body> 
 

 
</html>

來源

2016-01-13 webdev

當我谷歌'部分填充整個頁面bootstrap'我似乎看到有用的結果？ –

[HTML＆CSS + Twitter Bootstrap：完整頁面佈局或高度100％ - Npx]可能重複（http://stackoverflow.com/questions/14179166/htmlcss-twitter-bootstrap-full-page-layout-or-height-100 -npx） –

目前我還沒有找到正確的答案 – webdev

有沒有辦法，你可以使用Bootstrap中的一些類來做到這一點。但是，您可以通過jQuery的一點點，像這樣實現它：

$(document).ready(function() { 
    $(window).resize(function() { 
     var curHeight = $(window).height(); 

     $("header").height((curHeight * 0.3) + "px"); 

     $("nav").height((curHeight * 0.6) + "px"); 

     $("footer").height((curHeight * 0.1) + "px"); 
    }); 
});

有了這個代碼，你將不得不視口的30％至header，爲nav 60％，而對於footer 10％。您可以根據自己的意願輕鬆更改這些數字，只要它們合計爲1。此外，由於您在不同欄目中具有不同高度的不同圖像，因此您需要知道clearfix類別。這將確保的nav的高度等於最大的列的高度內nav：

HTML

<nav class="clearfix">

CSS

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
    .clearfix { display: inline-block; } 
    /* start commented backslash hack \*/ 
    * html .clearfix { height: 1%; } 
    .clearfix { display: block; } 
    /* close commented backslash hack */

你可以閱讀更多關於clearfixHERE。

來源

2016-01-13 22:47:01

這也可以使用響應式設計嗎？因爲我不確定，我想我會嘗試2種方法。 – webdev

@webdev：它應該是因爲它會對每個窗口調整大小事件作出反應。 –

最後我不需要使用它，但無論如何謝謝（我知道clearfix是什麼），但現在我有另一個問題... – webdev

部分高度與引導

回答

相關問題