1

我想实现,似乎是一个足够简单的布局,但我的 CSS 有奇怪的问题。

我真正需要的有 3 个部分:

1)我想要一个在用户滚动时始终可见的粘性导航栏(如 twitter.com)

2)对于我的页脚,无论内容的高度是多少,我都希望它始终刷新到页面底部。(注意:不是粘页脚,只是一直刷新到页面底部,或者内容下方有很多内容)。

3)最后,这就是我真正陷入困境的地方。我希望我的内容区域(在页眉/页脚之间)是可见区域的 100%,除非有更多内容,在这种情况下它会像往常一样滚动。

例如,我的主页引用很长,所以这不是问题,但其他内容页面较小,但需要某些重复的背景图像等应该填满整个屏幕,但似乎总是只填满它们的实际空间。

编辑(包括 HTML 和 CSS)

我正在使用 AngularJS(因此是 ng-view)。

这个项目很大,我一直在尝试修复 CSS,以便可以发布:

    <body>
    <div class="wrapper">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav">
                        <li><a href="#/area1">LINK 1</a></li>
                        <li><a href="#/area2">LINK 2</a></li>
                    </ul>
                    <a class="logoLink" href="#/">
                        <img class="headerLogo" src="static/img/logo.png" >
                    </a>
                </div>
            </div>
        </div>

        <div class="container-fluid full-height">
            <div class="row-fluid full-height">
                <div class="span12 full-height" ng-view>
                </div>
            </div>
        </div>

        <div class="push"></div>
    </div>


    <div class="footer">
        Footer goes here
    </div>
</body>

CSS:

    * {
    margin: 0;
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}

.footer, .push {
    height: 142px;
}

.footer {
    background: #1D1D1B;
    color: white;
}

.container-fluid {
    padding: 0;
    padding-top: 81px;
}

.full-height {
    height: 100%;
    min-height: 100%;
}
4

1 回答 1

2

顺便说一句,在您的 html 上标记<body>两次。

尝试这个 :

html, body {
        height: 100%;
      }

.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}

.push, .footer {
   height: 60px;
}
.footer {
   background-color: #f5f5f5;
}

@media (max-width: 767px) {
.footer {
   margin-left: -20px;
   margin-right: -20px;
   padding-left: 20px;
   padding-right: 20px;
   }
}

.wrapper > .container-fluid {
   padding-top: 60px;
}
.footer p {
  text-align: center;
}

demo

于 2013-06-11T10:17:58.770 回答