Question

我有这个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;
}

/*...*/

在这些@import个ed文件中，不再定义#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中 - 持有人（即body标签）。

还可以注意到#block-content定义为html和body：

#block-content {
    background-color: #0058a9;
    min-height: 100%;
}

除非它具有类似蓝色的背景颜色。

我所期望的是#block-content应该具有最小高度，身体的高度（即因为#block-content的背景是蓝色的，我期待看到剩下的，空的，底部的蓝色部分。）

不幸的是，min-height中的#block-content样式无法正常工作：它根本没有效果 - 如果我将其删除（即自背景身体是绿色的，我实际上在底部看到了剩下的绿色部分。）

除此之外，内容按照我的预期运行 - 根本没有问题。

我的问题是：为什么？我打算至少拥有这样一个具有身体高度的块。

我也试过在体内有一个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的背景为红色 - ＆gt;我预计剩下的红色部分;但是我看到剩下的绿色部分 - ＆gt;后面的body。

再次：我如何强制执行100％-tall div？

注意：关于背景颜色不。我实际上需要将#block-footer修复到底部，在设备高度的至少100％处是底部（它将保持页脚横幅）。

Answer 1

关于身高问题 - 您需要明确将html标记设置为100％身高。子元素只能使用具有显式设置高度的父级的引用高度属性。在html设置了明确的高度后，您可以将body设置为min-height 100%。

关于页脚，将页脚粘贴到可视视口的底部：

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Angular - Phonegap - ＆＃34; min-height：100％＆＃34;根本不工作

1 个答案: