Question

我有一些级联风格问题here

1）当屏幕的高度小于 680px 且宽度大于 1300px 时，页脚（.footer）应该放在页面的最底部（有效），但它应该有宽度100％（带有版权的白色表带），但它＆＃39;不是，我无法找到原因：（

有人能给我提示如何解决它吗？在我看来，Everythings的设定宽度为100％。每个浏览器都有问题。非常感谢提前

我的HTML：

<div class="clearfix footer">
    <div class="col-12 column">
        <nav class="navbar navbar-fixed-bottom" role="navigation">
            <div class="container-margin">
                <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul id="menu-prvni-menu" class="nav navbar-nav">
                        ...
                    </ul>
                </div>
            </div>
            <div class="copyright text-center">
                © Copyright 2015 dimension advertising
            </div>
        </nav>
    </div>
</div>

我的CSS：

@media (max-height: 680px) {
    .footer {
        position: absolute;
        top: 600px;
        margin: 0 -15px;
    }
}

.copyright.text-center {
    background-color: #fff;
    color: #000;
    line-height: 40px;
    vertical-align: middle;
    font-size: 12px;
}

.navbar-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 0;
    background-color: transparent;
}

.col-12 { width: 100% }

Answer 1

对于初学者，您的.footer将margin设置为0 -15px，将其拉到一边，并且由于将左右边距值设置为负值的行为不清楚我会完全避免使用它，我敦促你删除该规则。

直接在.footer内，您有.col-12.coloumn左右填充，进一步抵消了您的值。使用

重置其上的填充

.footer > .col-12.coloumn { padding: 0 }

如果需要，请在!important之后应用0。

然后，将.navbar-fixed-bottom和.footer设置为width: 100%。这是你的CSS更新：

@media (max-height: 680px) {
    .footer {
        position: absolute;
        top: 600px;
        width: 100%;
    }
    .footer > .col-12.column { padding: 0 }
    .navbar-fixed-bottom { width: 100% }
}

页脚宽度100％停在1300px

1 个答案: