使容器div用粘性页脚填充所有布局

Question

使容器div用粘性页脚填充所有布局

vin*_*a87 7 html css css3 responsive-design twitter-bootstrap-3

我为个人网站创建了一个新的布局.

我正在使用Twitter Bootstrap 3,我的初始布局是使用"Bootstrap with sticky footer"示例(http://getbootstrap.com/examples/sticky-footer-navbar/)

这是我的HTML:

<body>
    <!-- Wrap all page content here -->
    <div id="wrap">
        <!-- Begin page navigation -->
        <nav id="nav-container" class="navbar navbar-default container" role="navigation">
            <div class="container">
                <!-- Here I put a very normal Bootstrap 3 navbar -->
            </div>
        </nav>
        <!-- Begin page content -->
        <div id="main-container" class="container">
            <!-- All my content goes here! -->
        </div>
    </div>
    <!-- Begin page footer -->
    <footer id="footer" class="container">
        <div class="container">
        </div>
    </footer>
</body>

Run Code Online (Sandbox Code Playgroud)

Sticky Footer CSS:

html, body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -100px;
  /* Pad bottom by footer height */
  padding: 0 0 100px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 100px;
}

Run Code Online (Sandbox Code Playgroud)

我的布局的自定义样式:

body {
    /* Body's background will be grey */
    background-color: #C0C0C0;
}
#main-container {
    /* A box where I'll put the content will be white */
    background-color: #FFFFFF;
}
#wrap {
    height: 100%;
    min-height: 100%;
}
#main-container {
    min-height: 100%;
    height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

此代码生成此布局:

LayoutNow