Разделы Высота с бутстрапом

Я хочу, чтобы сайт подгонял страницу без прокрутки. У меня 3 раздела: заголовок, раздел и нижний колонтитул Я попытался протестировать это: row-lg-1 для заголовка и нижнего колонтитула и строки-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

Когда я раздел '' Google заполняет всю загрузочную страницу страницы, я, кажется, вижу полезные результаты? –

Возможный дубликат [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, 60% для nav, и 10% для footer. вы можете легко изменить эти номера по своему усмотрению до тех пор, пока они добавят до 1. Кроме того, вам нужен известный класс clearfix для вашего раздела nav, так как у вас разные изображения разной высоты в разных колонках. Это позволит убедиться, что высота 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 */

Вы можете прочитать больше о clearfix в HERE.

источник

2016-01-13 22:47:01

Может ли это работать с отзывчивым дизайном? Потому что я не уверен, я думаю, что попробую 2 способа. – webdev

@webdev: Он должен, потому что он реагирует на каждое событие изменения размера окна. –

Наконец-то мне не нужно использовать его, но спасибо в любом случае (я знаю, для чего это clearfix), но теперь у меня другая проблема ... – webdev

Разделы Высота с бутстрапом

ответ

Смежные вопросы