html structure:
<body>
<p id="header"></p>
<p id="article"></p>
<p id="footer"></p>
</body>What I want to achieve is: dynamically set a min-height for the article: 可见区域高度-header高度-footer高度 to avoid the footer appearing in the middle of the page.
I am using angularjs and do not plan to introduce jquery, so naturally I cannot use $(document).ready().
The problems I encountered are:
Unable to be implemented: Wait until the page is loaded and trigger the function to dynamically set the height. In the following cases, the functions are not executed (the same is true when window is replaced with 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() {});
I don’t know if it is better to put this code in the directive or in the Controller, or somewhere else.
Use css to directly set the minimum height. If it is hard-coded (for example: min-height: 400px), scroll bars will appear when the screen is small.
Or just don’t use these methods. What I did was wrong. Please give me your advice. Thank you very much.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Write one
directive吧。处理比较方便，虽然其实css的flex布局也可以解决这个问题。但根据你的疑问，还是先回答你通过angularHow to write it? Go directly to plunk.plunkYou don’t need to be taught how to watch it (requires scientific Internet access)