Question

我的模板有问题。我想在页面底部创建简单的标题，水平导航，垂直导航和带页脚的内容模板。菜单应该拉伸到页脚的开头，页脚应该在页面的整个底部，但不是固定位置并向下滚动内容，而是在内容下，所以当内容如此长时，页脚是在向下滚动到页面底部之前不可见。

这是有效的，当有内容时，但当只有2行时，页脚会跳到菜单下，如下所示：

enter image description here

即使没有上下文并且同时不修复它，如何将这个页脚放在底部，所以它不会随内容滚动？

以下是代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <title>template</title>
</head>
<body>
<div class="container-fluid">
        <div class="row">
            <header class="col-sm-12 col-md-12 col-lg-12 bordered header"> <!-- Header -->
                Header
            </header> <!-- End of header -->
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
                Menu horizontal
            </div><!-- End of horizontal menu -->
        </div>
    </div>
<div class="contentus">
        <div class="site-container">
                <div class="col-sm-2 col-md-2 col-lg-2 bordered menu-vertical"> <!-- Vertical menu -->
                    <menu role="menu">
                        Menu vertical
                    </menu>
                </div> <!-- End of vertical menu -->
                <div class="col-sm-10 col-md-10 col-lg-10 bordered content"> <!-- Content -->
                    Content

                    Combine Like Files

                    One way, and perhaps the easiest way, to reduce the number of HTTP requests is to combine like files. Specifically, combine all of the CSS files into one and all of the JavaScript files into one. Combining these files then compressing them creates one, hopefully small, HTTP request.

                    <!-- Bad -->

                    <!-- Good -->
                    In general, the CSS for a web page should be loaded at the beginning of the document within the head, while the JavaScript for a web page should be loaded at the end, just before the closing body tag. The reason for these unique placements is because CSS can be loaded while the rest of the website is being loaded as well. JavaScript, on the other hand, can only render one file at a time, thus prohibiting anything else from loading. One caveat here is when JavaScript files are asynchronously loaded after the page itself is done rendering. Another caveat is when JavaScript is needed in helping render the page, as such the case with the HTML5 shiv.

                    Image Sprites


                </div> <!-- End of content -->
        </div>
    <footer class="col-sm-12 col-md-12 col-lg-12 bordered footer"> <!-- Footer -->
        Footer
    </footer> <!-- End of footer -->
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

的style.css

.bordered {
    border: 1px solid black
}

.footer {
    position: static;
    z-index: 10;
    background-color: red;
    bottom: 0;
    height: 50px;
    display: block;
}

.content {
    position: relative;
    float: right;
    height: 100%;
    display: block;
}

.header {
    height: 67px;
}

.menu-vertical {
    position: absolute;
    background-color: #aaa;
    float: left;
    height: 100%;
}

.site-container {
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.site-container > .row:first-of-type {
    height:100%;
}

.menu-horizontal {
    height: 18px;
}

Answer 1

您可以在此处找到css解决方案：http://css-tricks.com/snippets/css/sticky-footer/

Answer 2

将页脚父级的位置更改为相对和页脚位置到固定和页脚底部到 0px 像这样：

.contentus{
   position:relative;
}

.footer{
  position:fixed;
  bottom:0px;
  width:100%; //if you want it to take the document width
 }

页脚应该保持在底部

2 个答案: