CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
elkloso
elkloso

Reputation: 27

Bootstrap 3 min-height div doesn't expand

I have a bootstrap 3 page with a centered box which contains content. If the content grows the box stays static and doesn't grows with my content but the bootstrap container grows. I don't know why the "box" did'nt expand. I tried "position:relative" and "overflow:hidden" but it doesn't work.
I tried also "container-fluid" - no reaction.

My CSS-Stylesheet: 

   html,
    body {
        height:100%;
        width:100%;
    }

    .container {
        height:100%;
        min-height:100%;
    }

    .row {
        height:100%;
        min-height:100%;
    }
.box {
    height:90%;
    min-height:90%;
    max-width:1100px;
    background-color:rgba(0,0,0,0.83);
    text-align:left;
    padding-left:5%;
    padding-right:5%;
    padding-top:1%;
    overflow:hidde;
    position: relative;
}

HTML: 

<div class="container">
        <div class="row">
            <div class="box">
                <div class="col-xs-12">
                </div>
            </div>
        </div>
</div>

Upvotes: 1

Views: 2431

Answers (2)

Saif
Saif

Reputation: 2679

Since you are using bootstrap, try to make like this

<div class="container">
    <div class="row">
        <div class="col-md-12 box">
            <div class="col-xs-12">
            </div>
        </div>
    </div>

and then make the height like:

.box
{ 
  height: 100%;
}

Upvotes: 0

Roman
Roman

Reputation: 3941

You have hardcoded the height of you box, thats why it doesnt grow as more content comes in. You have to set the height to auto. And if you want that the box has a minimum height while not so much content is present just use an additional min-height: 100vh;

.box {
    height:auto;
    min-height: 100vh;
    /* etc.
}

See working Fiddle

Upvotes: 3

Related Questions