Bootstrap Div高度不斷按內容大小

我想用Twitter Bootstrap製作一個網站，基本上是一個單一的，垂直居中的背景容器div列（所以我可以在背景顏色/圖像背景上邊緣）。Bootstrap Div高度不斷按內容大小

我一直有這個問題，我可以得到背景div來填補進入屏幕，但居中列div設置其高度的內容的大小。我希望它始終如一，至少與屏幕尺寸一樣高。我認爲min-height會做到這一點，但事實並非如此。

下面是它看起來像現在：（這只是一個測試頁面佈局）

enter image description here

這裏是它的代碼：

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Baileysaurus -- Dinosaurs &amp;&amp; Logic in your face!</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"> 
    <LINK href="header.css" rel="stylesheet" type="text/css"> 
    <LINK href="forum.css" rel="stylesheet" type="text/css"> 
    <!-- jQuery (Bootstrap requires jQuery!) --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <!-- Bootstrap --> 
    <LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" 
     media="screen"> 

     <!-- A file of PHP utility functions --> 
     <?php 
      include 'functions.php'; 
     ?> 
</head> 
<body> 
    <!-- Bootstrap --> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 

    <div id='background' class='row-fluid'> 
     <div class='span12'> 
      <div id='site-column' class='row-fluid span10 offset1 column-wrap'> 

          <img src="/PipeDog.jpg" alt="ARGUMENT INVALID" /> 

         <hr> 

         <p> 
         Put a blog here! 
         </p> 

      </div> <!-- END of outermost span12 div --> 
     </div> <!-- END - "site-column" div --> 
    </div> <!-- END - "background" div --> 

</body> 

</html>

CSS

html, body 
{ 
    height: 100%; 
    margin: 0; 
} 

#background 
{ 
    position: absolute; 
    top:0; 
    bottom: 0; 
    min-height: 100%; 
    min-width: 100%; 
    background-color: Gainsboro; 
} 

#site-column 
{ 
    top: 0; 
    bottom: 0; 
    min-height: 100%; 
    border-left: 2px solid; 
    border-right: 2px solid; 
    background-color: white; 
} 
.column-wrap 
{ 
    overflow: hidden; 
}

我試圖讓該照片中的白色列延伸至屏幕底部，至少，即使內容不長。任何人有什麼想法我失蹤？

來源

2013-02-14 Mister R2

你也應該能夠添加以下的CSS：

.span12 { 
    height:100%; 
}

來源

2013-02-14 23:04:49 F0rgiven

這實際上效果更好，因爲它不會通過使用絕對來擾亂其他元素的定位。不錯！ – 2013-02-14 23:12:46

試着讓你的外部<div>延伸到頁面的底部。

那麼試試這個在CSS：

.row-fluid 
{ 
position:absolute;  
bottom:0; 
}

而且我不知道，但您可能需要您的

<script src="bootstrap/js/bootstrap.min.js"></script>

線移動到頁面的<head>一部分。

來源

2013-02-14 22:54:36 marvin

完美！您的行流體類的CSS像魅力一樣工作。如果沒有太多的麻煩，請介紹一下爲什麼這會奏效，請介紹一下？我會特別感激！ – 2013-02-14 23:04:53

嗯，我認爲它解釋了自己:)你設置底部的div的底部。（對不起，「搞亂」你的文件，順便說一句）。如果你的頁面高度超過了100％，你也可以使用position：fixed; – marvin 2013-02-15 00:53:11

Bootstrap Div高度不斷按內容大小

回答

相關問題