CODEWITHSUNDEEP
csshtmltwitter-bootstrappositioning
Mister R2
Mister R2

Reputation: 881

Bootstrap Div height keeps going by content size

I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).

I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.

Here's what it looks like right now: (it's just a test page for the layout)

enter image description here

Here is the code for it:

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

I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long. Anyone have any ideas on what I'm missing?

Upvotes: 2

Views: 13777

Answers (2)

OliverP
OliverP

Reputation: 309

You should also be able to add the following CSS:

.span12 {
   height:100%;
}

Upvotes: 1

marvin
marvin

Reputation: 375

Try to make your outer <div> to extend to the bottom of the page.

So try this in the css:

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

And I'm not sure but you may have to move your

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

line to the <head> part of your page.

Upvotes: 1

Related Questions