2

私はTwitterBootstrapを使用してWebサイトを作成しようとしています。これは、基本的に、背景コンテナ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

次のCSSも追加できるはずです。

.span12 {
   height:100%;
}
于 2013-02-14T23:04:49.320 に答える
1

アウター<div>をページの一番下まで伸ばすようにしてください。

だからcssでこれを試してみてください：

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

よくわかりませんが、移動する必要があるかもしれません

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

<head>ページの一部に線を引きます。

于 2013-02-14T22:54:36.037 に答える