2

我正在尝试使用 Twitter Bootstrap 创建一个网站，它基本上是一个位于背景容器 div 顶部的垂直居中的单个列（因此我可以对边缘的背景进行着色/图像处理）。

我一直遇到这个问题，我可以让背景 div 填充输入屏幕，但是居中的列 div 将其高度设置为内容的大小。我希望它始终至少与屏幕尺寸一样高。我以为 min-height 会这样做，但事实并非如此。

这是它现在的样子：（它只是一个布局的测试页面）

在此处输入图像描述

这是它的代码：

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;
}

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

4

2 回答 2

1

尝试使您的外部<div>扩展到页面底部。

所以在css中试试这个：

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

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

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

行到<head>页面的一部分。

于 2013-02-14T22:54:36.037 回答
1

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

.span12 {
   height:100%;
}
于 2013-02-14T23:04:49.320 回答