Полный раздел страницы CSS

Question

Im работает над моим самым первым веб-сайтом/независимым проектом. До сих пор я немного знаю о html/css ruby ​​rails и bootstrap.

Мне было интересно, не могли бы вы помочь мне с чем-то, чего я не смог найти. Я попытался выяснить, как сделать определенную часть страницы занятой всей частью окна браузера. Сайт, над которым я работаю, - это 1 длинная страница с 4 различными разделами, каждая из которых должна отображать представление всего браузера. Мне было интересно, есть ли простой способ с помощью бутстрапа? Любая помощь приветствуется, спасибо.

Answer 1

Использование сетки жидкости (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem) и добавить ширину 100% в контейнере дивы, как:

CSS:

<style type="text/css"> 
    /* after your bootstrap css inclusing */  
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container 
    { 
    width: 100%; 
    } 

    </style> 

HTML:

<div class="container"> 
<div class="row-fluid"> 
    <div class="span4" style="background-color:red;">...</div> 
    <div class="span8" style="background-color:yellow;">...</div> 
</div> 
</div> 

обновление: Разделение рядами с высотой 50%:

CSS:

<style type="text/css"> 
    /* after your bootstrap css inclusing */  
    body, html, .container,.row-fluid .hunderd{ height:100%; min-height:100%; !important;} 
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container 
    { 
    width: 100%; 
    } 
    .fifty {height:50%;min-height:50%;} 
    </style> 

HTML:

<div class="container"> 
<div class="row-fluid fifty"> 
    <div class="span6 hunderd" style="background-color:red;">...</div> 
    <div class="span6 hunderd" style="background-color:yellow;">...</div> 
</div> 
<div class="row-fluid fifty"> 
    <div class="span6 hunderd" style="background-color:blue;">...</div> 
    <div class="span6 hunderd" style="background-color:orange;">...</div> 
</div> 
</div>