jquery - 使 bootstrap 均匀分布并正确对齐 div

Question

我想知道发生了什么，当我的 div 是 X 大小时，可以在一个屏幕上轻松看到而不需要滚轮，它将页脚放在屏幕下方，但是，当div 放置或尺寸更大

示例代码:

<div id="wrap">
    <div class="header cms-logo">
        <h1 class="font header">The Old Thatch Inn</h1>
    </div>
    <div id="main" class="container inner clear-top">

CSS:

html, body {
height: 100%;
}

.container {
margin: 20px 0px 20px 0px;
background-color: #e7e7e7;
border-radius: 5px;
}

#wrap {
min-height: 100%;
}

#main {
overflow: auto;
}

.footer {
position: relative;
margin-top: -150px;
height: 150px;
clear: both;
padding-top: 20px;
}

我做了一个JSFiddle这是如何工作的。

非常感谢

Answer 1

删除 #wrap CSS 或更改 min-height: 100%; 的百分比(更小)。