问题描述
我正在尝试为我要用角材料构建的小部件设置网格视图。
基本上，我希望左侧的边栏具有固定的宽度，右侧的内容是一列中包含三个部分的内容：具有固定高度（60px）的页眉，应填充小部件的内容和具有固定高度的页脚（ 60px）;
这是我安装的一个矮人。
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layot="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layot="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS：
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
JS：
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
现在，我的内容视图完全不显示（宽度为0）。 我想我缺少一些棱角分明的东西，但是呢？ 我也从jquery-ui添加了可拖动和可调整大小的选项，但我不认为这是问题所在。
谢谢您的帮助。
编辑1：只是拼写错误，the头是固定的，正在工作，希望它能对某人有所帮助。
1楼
Remco Haszing
1
已采纳
2015-07-25 13:47:47
你打错字了。
在具有my-main类的div ，将layot="column更改为layout="column"在具有my-sidebar的div中也犯了同样的错误。
angular.module("main", ["ngMaterial"]); angular.module("main") .run(function (){ $("#widget").draggable(); $("#widget").resizable(); });
*{ direction: rtl; } .widget-container{ position: absolute; top:20%; left: 30%; width: 40%; height: 40%; } .box-shadow{ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } .my-main{ width: 100%; } .my-header{ background-color: brown; width:60px; } .my-content{ background-color: blue; } .my-footer{ background-color: chartreuse; width:60px; } .my-sidebar{ width: 60px; background-color: aqua; }
<!DOCTYPE html> <html ng-app="main"> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="widget" class="widget-container box-shadow"> <div layout="row" layout-fill flex> <div class="my-main" layout="column" layout-fill flex> <div class="my-header" ></div> <div class="my-content" flex></div> <div class="my-footer" ></div> </div> <div class="my-sidebar" layout="column" ></div> </div> </div> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <!-- Angular Material Dependencies --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> <!-- Angular Material Javascript now available via Google CDN; version 0.10 used here --> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> <script src="script.js"></script> </body> </html>