CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
Manson Mamaril
Manson Mamaril

Reputation: 153

Div height 100% not going along with bootstrap and wordpress

This plain code(btw, I took it from another stackoverflow poste) works as the red div#wrapper reaches from top to bottom...

<html>
<head>
<style media="screen">
#wrapper {
    height:100%;
    width:300px;
    background-color:red;
}
#first {
    background-color:#F5DEB3;
    height: 200px;
}
</style>
</head>
<body>
    <div id="wrapper">
        <div id="first"></div>
    </div>
</body>
</html>

but when I integrate this to a wordpress+bootstrap+timber theme it's not working... even with a html,body{height: 100% } written in style.css...

I'm not sure if this is bootstrap or wordpress related problem...

hmtl, body{
    height: 100%!important;
}

#wrapper {
    height:100%!important;
    background-color:red;
}

.navbar-brand-image{
    margin: 0 auto;
}

@media (max-width: 1000px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
        float: none;
        text-align: center
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
        width: 100%;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}



.navbar{
    margin-bottom: 0px
}

.navbar .navbar-nav a{
    color: #fff;
    font-weight: bold
}

.navbar .navbar-nav a:hover{
    background-color: rgba(0, 0, 0, 0.2);
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

Upvotes: 0

Views: 697

Answers (2)

ℛɑƒ&#230;Ŀᴿᴹᴿ
ℛɑƒ&#230;Ŀᴿᴹᴿ

Reputation: 5376

When you use these libraries there are big chances of them override in your code.

To check if this is the case place !important at the end of your css properties.

Example:

#wrapper {
    height:100% !important;
    width:300px !important;
    background-color:red !important;
}

Upvotes: 0

Bangkokian
Bangkokian

Reputation: 6654

Without seeing the rest of the CSS in the page it's not possible to pinpoint the problem. You can however add an !important to the height element to ignore any CSS inheritance.

#wrapper {
    height:100% !important;
    width:300px;
    background-color:red;
}

Upvotes: 1

Related Questions