Question

我正在尝试使用Twitter 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;
}

我试图将该照片中的白色列拉伸到屏幕底部，至少，即使内容不是那么长。任何人对我缺少的东西都有任何想法吗？

Answer 1

尝试让您的外部<div>延伸到页面底部。

所以在css中试试这个：

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

我不确定，但你可能不得不移动你的

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

排到您网页的<head>部分。

Answer 2

您还应该能够添加以下CSS：

.span12 {
   height:100%;
}

Bootstrap Div高度按内容大小保持不变

2 个答案: