Question

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

我真正需要的部分有三个部分：

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

2）对于我的页脚，无论内容的高度如何，我都希望它始终刷到页面底部。（注意：不粘性页脚，只是总是刷到页面底部，或者内容下面有很多内容）。

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

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

编辑（包括HTML和CSS）

我正在使用AngularJS（因此使用ng-view）。

该项目 HUGE ，我一直在尝试修复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%;
}

Answer 1

顺便说一句，在你的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

Navst和Footer问题与Bootstrap

1 个答案: