在底部对齐 div [重复]答案

【问题标题】：align a div at the bottom [duplicate]在底部对齐 div [重复]
【发布时间】：2015-09-02 12:48:19
【问题描述】：

我有一个要在页面底部对齐的 div。为此，我使用了以下内容--

<div style="position:fixed;bottom:0;overflow:auto;word-wrap:break-word;display:block" ng-show="noData || failedStatus">
    <div class="alert alert-danger" ng-show="noData" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
    </div>
    <div class="alert alert-danger" ng-show="failedStatus" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
    </div>
</div>

此代码在底部对齐 div，但它没有将单词包装在 div 内。

【问题讨论】：

使用ng-view，让内容加载到div里面
试试white-space: nowrap;
您的代码似乎缺少position: fixed 或position: absolute，否则，很难看出您在做什么。那么是底部对齐的问题，还是 div 内的文本换行问题，或两者兼而有之？

标签： javascript html css angularjs

【解决方案1】：

这里是Fiddle Demo

您的 css 中缺少 position:absolute;。

最好避免使用内联 css，而是将类与父级 div 关联，然后将 css 应用到它。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
.footer-div{
    bottom:0;
    overflow:auto;
    word-wrap:break-word;
    display:block;
    position: absolute;
}
</style>
</head>
<body>
<div class="footer-div" ng-show="noData || failedStatus">
    <div class="alert alert-danger" ng-show="noData" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
        Some text
    </div>
    <div class="alert alert-danger" ng-show="failedStatus" style="overflow:auto;word-wrap: break-word;">
        <!-- something -->
        Some text
    </div>
</div>
</body>
</html>

【讨论】：

position:absolute 的问题是，如果相关的 div 之前没有 div，那么它会排在最前面。我希望 div 始终位于底部（如果我使用页脚也是同样的问题）。