Structure HTML :
<body>
<p id="header"></p>
<p id="article"></p>
<p id="footer"></p>
</body>
Ce que je veux réaliser, c'est : définir dynamiquement une hauteur minimale pour l'article : 可见区域高度-header高度-footer高度
pour éviter que le pied de page n'apparaisse au milieu de la page.
J'utilise angulairejs et je n'ai pas l'intention d'introduire jquery, donc naturellement je ne peux pas utiliser $(document).ready().
Les problèmes que j'ai rencontrés sont :
Impossible d'être implémenté : Attendez que la page soit chargée et déclenchez la fonction pour définir dynamiquement la hauteur. Dans les cas suivants, les fonctions ne sont pas exécutées (il en est de même lorsque window est remplacé par document) :
angular.element($window).ready(function() {});
angular.element($window).on('load', function() {});
angular.element($window).bind('load', function() {});
angular.element($window).onload(function() {});
$window.onload = function() {};
$scope.$on('$viewcontentloaded', function() {});
Je ne sais pas s'il vaut mieux mettre ce code dans la directive ou dans le Controller, ou ailleurs.
Utilisez CSS pour définir directement la hauteur minimale Si elle est codée en dur (par exemple : min-height : 400px), des barres de défilement apparaîtront lorsque l'écran est petit.
Ou tout simplement, n’utilisez pas ces méthodes. Ce que j’ai fait était mal. S’il vous plaît, donnez-moi vos conseils. Merci beaucoup.
Écrivez-en un
directive
. Le traitement est plus pratique, même si en fait la dispositionflex
du CSS peut également résoudre ce problème. Mais selon votre question, répondons d'abord à la façon dont vous l'écrivez viaangular
et passons directement à plink.plunk
Vous n'avez pas besoin d'apprendre à le regarder (nécessite un accès scientifique à Internet)