CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Gavin Lau
Gavin Lau

Reputation: 19

Image extends the container div although minimum height is set?

I am having an issue with my CSS at the moment and I can't seem to figure out how to fix the issue, I tried researching this problem but I couldn't really put into words how I would describe my situation.

Basically I have set the body to 100% height so that it acts as the parent for any child attribute that may set. the main goal that I am trying to achieve is to have the background image of my div to fill the rest of the page without extending it and creating an scroll overflow. However instead its overflowing and extending the body height and creating an overflow, which you can see in my screenshot below:

enter image description here

my html code is as follows

<body>
<nav class="navbar navbar-default">
    <div class="container center-nav">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">MC</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Videos</a></li>
    </ul>
        </div>            

    </div>    
</nav>
<div class="main-body">
    <div class="main-wrapper">

    </div>
</div>

My CSS

html{
    height: 100%;
    min-height: 100% !important;
}

body{
    height: 100%;
    min-height: 100% !important;
        margin: 0;
}

.navbar.navbar-default{
    margin-bottom: 0px;
    border-radius: 0px;
}

.main-body{
    height: 100%;
}

.main-wrapper{
    height: 100%;
    background: url("../images/test.jpg");
    background-size:cover;
}

Upvotes: 0

Views: 36

Answers (1)

Derek
Derek

Reputation: 967

You've made .main-wrapper 100% the height of its parent. If body is 1000px, .main-wrapper will be as well. Since you also have another item in the body, it's pushing your main wrapper down.

Use height: calc(100% - [the height of the nav])

Upvotes: 1

Related Questions