css - 整页部分 CSS

Question

我正在做我的第一个网站/自由项目。到目前为止，我对 html/css ruby​​ rails 和 bootstrap 有一些了解。

我想知道你是否可以帮我解决一些我无法查找的问题。我试图找出如何使页面的某些部分占据浏览器窗口的整个部分。我正在处理的网站是 1 个长页面，有 4 个不同的部分，每个部分都需要查看整个浏览器的视图。我想知道引导程序是否有一种简单的方法可以做到这一点？任何帮助表示赞赏，非常感谢。

Answer 1

使用流体网格 ( http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem ) 并为您的容器 div 添加 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>