整个页面部分CSS

我正在处理我的第一个网站/自由职业项目。到目前为止，我对html/css ruby rails和bootstrap有一些了解。整个页面部分CSS

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

来源

2013-05-08 vpoola88

你能提供更详细一点，再加上你已经有任何的代码？例如，填充屏幕的每个部分都是垂直堆叠的，并在您向下滚动时显示？ – JMWhittaker 2013-05-08 08:04:09

块级元素默认占用其父元素的整个宽度。合乎逻辑的解决方案是不使用限制元素宽度的Bootstrap类。 – cimmanon 2013-05-08 12:15:47

所以我有一个引导页面上的2行，他们只是停在我的24英寸显示器上。一行有白色背景，第二行有黑色背景。在那之下，它的空白空间。 – vpoola88 2013-05-10 17:00:08

使用流体网格（http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem）和100％的宽度添加到您的div容器，如：

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>

来源

2013-05-08 11:17:33

我能够让我的宽度达到100％，但我的高度需要占用页面的50 + 50％。它只有1页，有2个部分，我放入行中。 – vpoola88 2013-05-10 17:01:11

整个页面部分CSS

回答

相关问题