用於多行全屏顯示的CSS帶引導程序

我需要CSS的幫助才能將5行堆疊在一起，並且每行都是100％的高度和100％的瀏覽器寬度。用於多行全屏顯示的CSS帶引導程序

這裏是我的HTML：

<div id="wrapper"> 
<div class="container-fluid"> 

    <div class="row-fluid fullscreen"><a name="1"></a>   
     <h1>section 1</h1> 
    </div> 

    <div class="row-fluid fullscreen"><a name="2"></a> 
     <h1>section 2</h1> 
    </div> 

    <div class="row-fluid fullscreen"><a name="3"></a>   
     <h1>section 3</h1> 
    </div> 

    <div class="row-fluid fullscreen"><a name="4"></a>   
     <h1>section 4</h1> 
    </div> 

    <div class="row-fluid fullscreen"><a name="5"></a>   
     <h1>section 5</h1> 
    </div> 

</div>

這裏是我的CSS：

html,body { margin:0; padding:0; } 
.fullscreen { height:100%; width:100%; }

提前感謝！也許用於您

來源

2015-12-04 s15199d

這裏有什麼問題嗎？你嘗試使用100vh？ –

@ikeMiguel 100vh沒有工作。海德爾在100vh工作的地方做了一個小提琴，但它不適用於我的代碼。不知道它是否導致100vh不起作用的Bootstrap。 – s15199d

您是否爲html和body添加了100％的高度和寬度？ –

您可以使用100vh而不是使用100％作爲高度。 vh是視口高度。

你.fullscreen CSS現在應該是：

.fullscreen { 
    height: 100vh; 
    width: 100% 
}

來源

2015-12-04 13:59:00

100vh不工作。不知道它是Bootstrap的b/c。 – s15199d

@ s15199d而不是使用行流體，您應該只使用行。你找到解決方案嗎？ –

見例如：fiddle

CSS：

html,body {margin:0; padding:0; height:100%; width:100%;} 
#wrapper, .container-fluid, .fullscreen { height:100%; width:100%; }

來源

2015-12-04 13:52:17

你可以使用viewport height屬性來設置每個DIV的高度等於屏幕高度一樣height: 100vh;

.fullscreen { width:100%; height: 100vh; }

http://jsfiddle.net/05w2bhoz/

你可以閱讀關於它，例如here或只是谷歌它。
但不幸的是，它不是跨瀏覽器的方法，所以如果你需要完全支持，你應該使用js或jQuery來設置每個div的高度等於窗口高度。閱讀本Get the browser viewport dimensions with JavaScript

來源

2015-12-04 13:53:00 Heidel

而不是使用行流體，因爲所有新的瀏覽器都可以這樣做。然而，說一些年長的人會沒事的。 – LGSon

@海德爾謝謝你的小提琴。你的小提琴可以工作，但是當我把你的css插入我的時候它不起作用。我不知道Bootstrap是否導致100vh不起作用。 – s15199d

只需更換高度：100％的100vh

.fullscreen { height:100vh; width:100%; }

來源

2015-12-04 13:53:32 bfahmi

CSS：

html,body { 
height: 100%; 
width: 100%; 
margin:0; 
padding:0; 
position: relative; 
} 

#wrapper { 
height: 100%; 
width: 100%; 
} 

.container-fluid { 
height: 100%; 
width: 100%; 
} 
.fullscreen { 
height: 100%; 
width: 100%; 
position: relative; 
}

HTML：

<div id="wrapper"> 
<div class="container-fluid"> 

    <div class="row-fluid fullscreen"><a name="1"></a>   
     <div class="span12"><h1>section 1</h1><span> 
    </div> 

    <div class="row-fluid fullscreen"><a name="2"></a> 
     <div class="span12"><h1>section 2</h1><span> 
    </div> 

    <div class="row-fluid fullscreen"><a name="3"></a>   
     <div class="span12"><h1>section 3</h1><span> 
    </div> 

    <div class="row-fluid fullscreen"><a name="4"></a>   
     <div class="span12"><h1>section 4</h1><span> 
    </div> 

    <div class="row-fluid fullscreen"><a name="5"></a>   
     <div class="span12"><h1>section 5</h1><span> 
    </div> 

</div>

來源

2015-12-04 13:53:54 Elow

嘗試這可以幫助你在你的CSS

html, body 
{ 
height: 100%; 
} 
body 
{ 
min-height: 100%; 
} 
.fullscreen 
{ 
height:100vh; 
}

來源

2015-12-04 13:58:34

用於多行全屏顯示的CSS帶引導程序

回答

相關問題