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