angular实现div盒子高度自适应

最新推荐文章于 2020-12-01 14:37:01 发布

原创最新推荐文章于 2020-12-01 14:37:01 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular实现div自适应窗口高度

angular 专栏收录该内容

1 篇文章

订阅专栏

本文档介绍了如何在 Angular 应用中让 Div 元素根据窗口大小自动调整其高度，适合初学者参考和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body >
	<div my-dre></div>
</body>

<script>
	angular.module("myApp",[])
		//自定义一个指令
		.directive("myDre",function(){
			return{
				link:function($scope,Ele,Attrs){
					//首先获取打开浏览器窗口的高度↓
					$scope.height=window.innerHeight
					//再给<div my-dre></div>添加"height=$scope.height+'px'"的样式↓
					Ele.css("height",$scope.height+"px")
					//如果存在上下内外边距，可以直接进行加减↓
					//Ele.css("height",$scope.height+margin/padding+"px")
					//实时监听浏览器窗口的高度并赋值给"height"属性↓
					window.onresize=function(){
						$scope.height=window.innerHeight
						Ele.css("height",$scope.height+"px")
					}
				}
			}
		})
</script>