I am faced with this specific HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- NOTE: Make sure to remove the width=device-width and height=device-height attributes for iOS 7 support. Reference: 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>
This is accompanied by a stylesheet:
/* Styles for different densities */
@import url('main-android-ldpi.css') screen and (-webkit-max-device-pixel-ratio: 0.9999999);
@import url('main-android-mdpi.css') screen and (-webkit-min-device-pixel-ratio: 1);
@import url('main-android-hdpi.css') screen and (-webkit-min-device-pixel-ratio: 1.5);
@import url('main-android-xhdpi.css') screen and (-webkit-min-device-pixel-ratio: 2);
/****************************************************************************************************************
* These styles are also applicable for iPhones - they need to be moved to a common CSS file eventually. *
****************************************************************************************************************/
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;
}
/*...*/
In the imported files, specifications for
#block-footer, #block-content, html, body,#block-content-ender were not found.
The directive ng-view correctly injects the following content using 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="Search e.g. Red, 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">
Place for footer banner
</div>
Upon reviewing the styles, it is evident that html and body have a minimal height of 100% with a green background color for debugging purposes.
An observation worth noting is that
#block-logo, #block-search, #block-content#block-footer do not belong to any specific tag in the document structure but are contained within the ng-view holder.
#block-content has been defined similar to html and body, except with a blue-like background color:
#block-content {
background-color: #0058a9;
min-height: 100%;
}
However, the intended behavior of setting the minimum height was not realized as expected. Despite the assignment of the min-height property, it did not have any effect at all.
Furthermore, the rest of the content and directives such as ngRoute operate seamlessly without any issues.
The perplexing question arises: Why does the #block-content fail to comply with the set height criteria?
A possible solution attempted involved nesting a div inside the body:
<!DOCTYPE html>
<html>
<!-- -same head -->
<body>
<div id="content" ng-view></div>
</body>
</html>
Accompanied by its distinct styling:
/* Specific style rules */
html, body {
min-height: 100%;
margin: 0;
background-color: green;
}
#content {
min-height: 100%;
background-color: red;
}
Unfortunately, neither attempt succeeded in achieving the desired outcome. Even with the distinctive styling applied to #content, it failed to display the intended behavior due to the green background seeping through from the body.
In conclusion: How can one enforce these 100%-height div elements to respond accurately?
Note: The primary concern lies in fixing the positioning of #block-footer to the bottom, ensuring it spans at least 100% of the device height to accommodate a footer-banner.