angularjs - template - ¿Cómo implementar el clásico “pie pegajoso” con material angular?
angular material template (4)
Así que solo estoy experimentando con material angular, pero lo que hice para esto fue
<div layout="column" layout-fill>
<md-toolbar class="md-default-theme">
<!-- your stuff -->
</md-toolbar>
<md-content layout-fill role="main">
<!-- your main areas -->
</md-content>
<md-bottom-sheet>
<div>I am a sticky footer</div>
</md-bottom-sheet>
</div>
No he experimentado lo suficiente como para saber con certeza si esto hace todo lo que quiero, pero hasta ahora parece prometedor. Tenga en cuenta que si el contenido no está restringido, probablemente empujaría la hoja inferior hacia abajo continuamente. si usaste un desbordamiento-y: auto en el md-content podría funcionar (aún no tengo suficiente de mi aplicación creada para probar)
Reconozco que la implementación del Material Angular es un trabajo en progreso, pero esta mañana he pasado un tiempo tratando de familiarizarme con él. Sin embargo, estoy realmente luchando para que los conceptos mostrados en las demostraciones funcionen en un sitio independiente.
Parece que cuando las directivas como <md-toolbar> y <md-content> se usan en contenedores con alturas fijas, entonces funcionan muy bien. Estoy luchando con la forma de lanzarlos dentro de una etiqueta <body y poder tener un diseño de pie de página pegajoso como en este ejemplo .
He probado muchas variaciones, pero aquí hay un ejemplo que no funciona cuando el contenido se elimina del DOM. Cuando el contenido está allí, crece más allá de la ventana gráfica y el pie de página se coloca después como se espera. En las últimas versiones de Chrome y Firefox, este ejemplo mantiene el pie de página en la parte inferior cuando se elimina el contenido, pero en IE esto simplemente no funciona. En IE, el pie de página flota justo debajo del encabezado, independientemente de si el contenido principal se muestra o no.
DEMO: http://codepen.io/sstorie/pen/xbGgqb
<body ng-app="materialApp" layou-fill layout=''column''>
<div ng-controller="AppCtrl" layout=''column'' flex>
<md-toolbar class=''md-medium-tall''>
<div class="md-toolbar-tools">
<span>Fixed to Top</span>
<span flex></span>
<md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
</div>
</md-toolbar>
<main class=''md-padding'' layout="row" flex>
<div flex>
<md-card ng-if="displayContent" ng-repeat = "card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
<div flex>
<md-card ng-if="displayContent" ng-repeat = "card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
</main>
<md-toolbar class="md-medium-tall">
<div layout="row" layout-align="center center" flex>
<span>FOOTER</span>
</div>
</md-toolbar>
</div>
</body>
Javascript:
angular.module(''materialApp'', [''ngMaterial''])
.controller(''AppCtrl'', function($scope) {
$scope.cards = [
{text: ''Bla bla bla bla bla bla bla '',
title: ''Bla'' },
...repeat 10 times...
];
$scope.displayContent = true;
$scope.toggleContent = function(showContent) { $scope.displayContent = showContent; };
});
CSS:
body {
min-height: 100%;
height: auto !important;
height: 100%;
}
Definitivamente no soy un gurú de CSS, pero parece que esto debería ser fácil de hacer con las opciones de diseño en material angular, así que espero que realmente me esté perdiendo algo obvio aquí.
No encontré ninguna de las respuestas que funcionara de manera confiable en todos los navegadores sin una falla u otra.
Como se señaló en esta respuesta , esto funciona:
<md-toolbar></md-toolbar>
<md-content flex layout="column">
<div layout="column" flex>
<main flex="none"></main>
<div flex></div>
<footer flex="none"></footer>
</div>
<md-content>
Aquí hay un codepen para el ejemplo.
No hay necesidad de una hoja de abajo o algo así. Aproveche el comportamiento de flexbox y estará listo para ir:
- Use
layout="column"y atributos delayout-fillen su envoltorio principal (puede ser su etiqueta debody). - Crea tus secciones:
header,mainyfooter. - Use el atributo
flexen sumain.
Revisa mi ejemplo, basado en la pluma @kuhnroyal.
Puedes conseguir que esto funcione con una pequeña solución.
- use
min-height: calc(100vh - 176px)en su elementomain, (176px = 2 * 88px para las barras de herramientas md) - eliminar el
layout=''column''de la raíz div - eliminar el
layout-fill layout=''column''del cuerpo
Reemplazé el material css / js con CDN versión 0.8.3 ya que mi IE10 se bloquearía con esa cantidad de CSS / JS en un Codepen.
Probé esto en Chrome, Firefox e IE10 - parece funcionar.