这是我的页面结构
<head>
<script> javascript and angular....</script>
</head>
<body>
<div id="main" class="" >
<div ng-view class="view" ></div>
</div>
<script>load some extra libraries</script>
<footer>the old bootstrap footer</footer>
</body>
我标记<footer>the old bootstrap footer</footer>它是引导程序的旧页脚，找到了here。我删除了bootstrap html和css，我想用页面底部的我的页脚替换它，但不是粘性的。当页面加载时我将看不到页脚，我将不得不到页面底部看到它，如果我上去它将不再可见。
这是我的尝试。
<head>
<script> javascript and angular....</script>
</head>
<body>
<div id="main" class="" >
<div ng-view class="view" ></div>
</div>
<script>load some extra libraries</script>
<footer>the old bootstrap footer</footer>
</body>
<div id="foot" class="container">
foot
</div>
和css
#foot{
bottom: 0;
vertical-align: bottom;
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
这将随页面移动（不粘）。但它不会在底部对齐。我不能让它走到最底层。
有任何帮助吗？
由于
答案 0 :(得分：1)
我添加了颜色让你看看这里发生了什么
body {
margin: 0;
}
#main {
background: cadetblue;
/* FAKE Height */
height: 300px;
}
#foot {
background: coral;
}<body>
<div id="main">
<div class="view" >View element</div>
<!-- PUT YOUR MAIN CONTENT HERE -->
</div>
<div id="foot" class="container">
footer : no extra style needed
</div>
</body>
我不明白你是否希望它是粘性的，所以这里有一种方法可以让它粘在视口的底部：
/* USEFUL PART */
body {
/* FOOTER SIZE */
margin-bottom: 20px;
}
#foot {
background: coral;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* FOR EXAMPLE */
.view {
width: 400px;
display: inline-block;
text-align: justify;
}
#main {
background-color: cadetblue;
background-image: linear-gradient(to bottom,cadetblue,lightblue);
text-align: center;
}<body>
<div id="main">
<div class="view" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis volutpat enim, id euismod orci. Morbi sed congue erat. Integer tristique vel nunc vitae aliquam. Etiam pretium scelerisque ligula eu porttitor. Proin mattis sapien ut tellus eleifend, non gravida velit vestibulum. Aliquam id felis nunc. Curabitur vel congue massa, non fringilla turpis. Nam aliquet magna eros, a rhoncus purus tempor sit amet. Curabitur vitae urna porta, gravida velit lobortis, consequat neque. Cras vel condimentum est, vel scelerisque est. Vivamus eget elit quis ipsum consequat sodales. Pellentesque eleifend magna est, eleifend sollicitudin urna congue semper.
Cras eget est ac orci luctus consectetur. Aliquam imperdiet velit erat, ac lacinia tellus tempor at. Nam aliquam imperdiet porttitor. Morbi vitae sollicitudin mauris. Donec ut condimentum nisi. Cras vel urna non nisl ornare scelerisque. Nulla facilisi. Nunc et ante non felis egestas accumsan sed at neque. Phasellus viverra vitae ligula eget porttitor. Nam vulputate orci eu lectus mattis tristique. Pellentesque faucibus enim augue, at aliquam nibh ultricies vel. Curabitur eu ligula elit. In iaculis dictum ipsum, sit amet mattis mi ullamcorper nec. Aenean placerat mi nec risus bibendum rhoncus. Nulla aliquet lacus eget tempus cursus. Quisque eu accumsan sapien, vel condimentum magna.
Nunc consequat, ligula eu porttitor dapibus, justo dui commodo leo, eu efficitur felis nibh non nisl. Ut quis arcu et nibh fringilla egestas. Aliquam ullamcorper arcu non aliquet finibus. Curabitur mattis, mauris eu vestibulum rutrum, risus nulla vehicula lorem, vel egestas lorem leo in magna. Fusce lacinia odio diam, sed maximus quam egestas ac. Praesent quis leo vehicula, elementum ligula vel, cursus sapien. Curabitur porttitor interdum nisi, cursus consectetur ex varius non. Suspendisse iaculis dolor bibendum sapien tristique pharetra. Donec interdum dui a diam pharetra, nec lobortis ex commodo. Fusce ac nulla sed purus consectetur commodo sit amet sed lacus. Suspendisse turpis lacus, condimentum eu elit eu, tempor efficitur lacus. Donec imperdiet diam quis augue malesuada, viverra pulvinar libero vestibulum.
Pellentesque et dui leo. Integer nec rhoncus quam. Pellentesque posuere a magna id fringilla. Phasellus id nibh at elit lacinia dictum at ut neque. Maecenas eleifend sit amet libero nec mollis. In feugiat elit leo, vitae tincidunt felis ultricies vitae. Vestibulum gravida commodo leo ut pulvinar. Duis vitae massa dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer mattis quis lectus quis feugiat. Sed massa augue, consectetur ut vulputate et, pharetra sed turpis. Cras lacus neque, fermentum sollicitudin lectus sed, vehicula varius erat.
Vivamus euismod rhoncus arcu, imperdiet accumsan turpis. Sed mollis, massa eu congue facilisis, leo sem commodo leo, ac laoreet justo elit in est. Etiam massa leo, sollicitudin sed imperdiet at, vehicula vel metus. In nunc ipsum, ultricies iaculis ligula vel, semper euismod nulla. Morbi eu efficitur enim. Cras a neque orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tristique at lectus auctor consequat. Pellentesque posuere felis vel nisi suscipit, sed vulputate leo convallis. Mauris bibendum, est non hendrerit rhoncus, elit tortor sodales purus, in lacinia dui ex sed nibh. Nulla posuere tincidunt luctus. Curabitur ultrices venenatis ipsum, quis dictum elit consectetur ut. Nulla sodales pharetra ultricies. Vivamus tristique vitae arcu tempus imperdiet.
</div>
<!-- PUT YOUR MAIN CONTENT HERE -->
</div>
<div id="foot" class="container">
footer : no extra style needed
</div>
</body>
恕我直言，你需要在使用bootstrap和东西之前更新你的HTML知识
答案 1 :(得分：0)
您可以尝试这种纯CSS解决方案。
CSS
html {
min-height: 100%;
}
body {
margin: 0 0 100px;
}
#foot {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML：
<head>
<script> javascript and angular....</script>
</head>
<body>
<div id="main" class="" >
<div ng-view class="view" ></div>
</div>
<script>load some extra libraries</script>
<footer>the old bootstrap footer</footer>
</body>
<div id="foot" class="container">
foot
</div>