如何將Bootstrap的英雄單位高度設置爲100％？

我正在做一個使用Bootstrap的非常簡單的登陸頁面。這個想法是讓英雄單元文本元素覆蓋整個頁面，而不管窗口大小。 width: 100%; CSS指令效果很好，但height: 100%;不起作用 - 英雄單元元素仍然高約200px，並附加到窗口的頂部。我如何將英雄單位的身高設置爲100％？提前致謝。如何將Bootstrap的英雄單位高度設置爲100％？

來源

2013-01-09 appplemac

你必須設置height:100%上html和body標籤，如果英雄div有父母，它也會需要。

例http://jsfiddle.net/xExSE/

來源

2013-01-09 20:31:22

謝謝，@克里斯托弗·馬歇爾！我應該然後使用垂直居中文本垂直對齊嗎？ – appplemac

您可以嘗試，根據您的佈局，它們可能有不同的解決方法。例如行高等於容器高度，JS解決方案取決於窗口大小等。 –

這似乎工作確定：

<html> 
<head> 
    <!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <!-- css --> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" /> 
    <style> 
    .hero-unit { 
     height: 100%; 
     background-color: green; 
    } 
    </style> 
</head> 

<body> 
    <div class="hero-unit"> 
     <h1>Full Page Hero!</h1> 
    </div> 
</body> 
</html>

來源

2013-01-09 20:44:51 mgamba

如何將Bootstrap的英雄單位高度設置爲100％？

回答

相關問題