【发布时间】：2014-09-12 14:18:08
【问题描述】：
我有这个 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/platform.css" />
<title>1001Carros</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function(){
angular.bootstrap(document, ['Application']);
}, false);
</script>
</head>
<body ng-view></body>
</html>
使用这个样式表：
/* Low density (120), mdpi */
@import url('main-android-ldpi.css') screen and (-webkit-max-device-pixel-ratio: 0.9999999);
@import url('main-android-ldpi-portrait.css') screen and (-webkit-max-device-pixel-ratio: 0.9999999) and (orientation: portrait);
@import url('main-android-ldpi-landscape.css') screen and (-webkit-max-device-pixel-ratio: 0.9999999) and (orientation: landscape);
/* Medium density (160), mdpi */
@import url('main-android-mdpi.css') screen and (-webkit-min-device-pixel-ratio: 1);
@import url('main-android-mdpi-portrait.css') screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1.4999999) and (orientation: portrait);
@import url('main-android-mdpi-landscape.css') screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1.4999999) and (orientation: landscape);
/* High density (240), hdpi */
@import url('main-android-hdpi.css') screen and (-webkit-min-device-pixel-ratio: 1.5);
@import url('main-android-hdpi-portrait.css') screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9999999) and (orientation: portrait);
@import url('main-android-hdpi-landspace.css') screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9999999) and (orientation: landscape);
/* Extra high density (320), xhdpi */
@import url('main-android-xhdpi.css') screen and (-webkit-min-device-pixel-ratio: 2);
@import url('main-android-xhdpi-portrait.css') screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait);
@import url('main-android-xhdpi-landscape.css') screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape);
/****************************************************************************************************************
* En realidad estos estilos que estan aca valen tambien para iPhone - tengo que moverlos a algun css en comun. *
****************************************************************************************************************/
html, body {
min-height: 100%;
margin: 0;
background-color: green;
}
/*...*/
#block-content {
background-color: #0058a9;
min-height: 100%;
}
#block-footer {
margin-bottom: 0;
background-color: #bbbbbb;
}
#block-content-ender {
clear: both;
}
/*...*/
在那些@imported 文件中，没有更多关于#block-footer 或#block-content、html、body 或#block-content-ender 的规范被定义。
最后，ng-view（在body 标签中）指令通过ngRoute 正确地将以下内容放入其中：
<div id="block-logo">
<button id="btn-go-main" class="btn-blue-gradient"></button>
</div>
<div id="block-search">
<div id="search-box">
<div id="search-box-btn" ng-click="doSearch()"></div>
<input type="text" id="search-box-text" ng-model="searchText" placeholder="Buscar Ej. Rojo, Chevrolet, Vitara" />
</div>
</div>
<div id="block-content">
<div id="floating-guys">
<div id="tall-guy"></div>
<div id="short-guy"></div>
</div>
<div id="main-menu">
<ul id="options" class="menu">
<li ng-repeat="button in buttons"
ng-attr-id="button.id"
ng-class="{'menu-row': true, 'section': button.section, 'clickable': !button.section}"
ng-style="button.styles"
ng-click="button.click()">
{{ button.text }}
</li>
</ul>
</div>
<div id="block-content-ender"></div>
</div>
<div id="block-footer">
Lugar para el banner de pie
</div>
阅读样式后，您会注意到html 和body 的最小高度为100%。出于调试目的，它们具有green 背景颜色。
还可以注意到#block-logo、#block-search、#block-content和#block-footer不属于文件中的任何标签，而是包含在ng-view-holder内（即body标签） .
人们还可以注意到#block-content 的定义类似于html 和body：
#block-content {
background-color: #0058a9;
min-height: 100%;
}
除了因为它有类似蓝色的背景颜色。
我所期望的是#block-content 的最小高度应该是身体的高度（即，由于#block-content 的背景是蓝色的，我希望看到一个剩余的、空的、类似蓝色的部分在底部）。
不幸的是，#block-content 中的 min-height 样式不起作用：它根本没有效果 - 如果我删除它也是一样的（即因为身体的背景是绿色的，我居然在底部看到了一个残留的绿色部分）。
除此之外，内容按我的预期工作 - ngRoute 完全没有问题。
我的问题是：为什么？我的目的是让这样的块至少有身体的高度。
我也尝试过在 body 中有一个 div 并持有 ng-view 指令：
<!DOCTYPE html>
<html>
<!-- -same head -->
<body>
<div id="content" ng-view></div>
</body>
</html>
有自己的风格：
/* this style still existed */
html, body {
min-height: 100%;
margin: 0;
background-color: green;
}
#content { min-height: 100%; background-color: red; }
但两者都没有效果（即#content 的背景是红色的 -> 我预计剩余的红色部分；但我看到剩余的绿色部分 -> 后面的 body）。
再次：我怎样才能强制使用这种 100% 高的 div？
注意：这不是关于背景颜色的。我实际上需要将#block-footer 固定到底部，底部至少为设备高度的 100%（它将包含页脚横幅）。
【问题讨论】：
标签： html css angularjs cordova