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高度不断按内容大小

回答

相关问题