整個頁面部分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

回答

相關問題