Question

这个简单的代码（顺便说一下，我是从另一个stackoverflow poste中获取的）当红色 div＃wrapper 从上到下到达时起作用...

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

但是当我将它整合到wordpress + bootstrap + timber主题时，它无法工作......即使用 style.css 编写的html,body{height: 100% } ...... < / p>

我不确定这是引导程序还是与wordpress相关的问题...

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

Answer 1

如果没有看到页面中的其余CSS，就无法确定问题所在。但是，您可以在height元素中添加！important来忽略任何CSS继承。

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

Answer 2

当您使用这些库时，很有可能在代码中覆盖它们。

要检查在css属性的末尾是否存在 !important 的情况。

示例：

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

Div高度100％不与bootstrap和wordpress一起使用

2 个答案: