Question

我目前正在使用angular-js处理单页应用程序。我有特定的路线，我想注入一些新的HTML模板。
为此，我创建了一个名为id #main的容器，它位于两个导航栏（页眉和页脚）之间。另外我有一个图像作为背景，它包含在一个单独的div中，高于身体中所有其他html元素。

所以结构如下：

<body ng-controller="mainController">
  <div id="background"></div>
  <div id="navbar-override" ...> ... </div>

  <div id="main" ng-view></div>

  <div id="navbar-bottom-override" ...> ... </div>
</body>

我现在的问题是：#main div应始终保持整个页面的相同高度和宽度（完全可用的h＆amp; w）。我有a picture，其中我描述了#main div应该如何与页面的其余部分一起运行。我怎样才能实现这种对齐？

P.S。：这是html标签的CSS：

html {
  height: 100%;
  width: 100%;
  padding: 65px;
}

Answer 1

您必须为您的主要定义样式：

#main{
   width: ---something-----;
   height: ---something-----;
   display:block;
}

然后你可能想要处理溢出内容。请参见：http://www.w3schools.com/cssref/pr_pos_overflow.asp

您也可以使用计算尺寸的css功能：

height: calc( 100% - 100px );

其中100px将是页眉和页脚的组合高度，例如。

Answer 2

你的#main div应该原生地延伸到屏幕的宽度（减去来自html的每侧的65px填充，虽然我会删除该填充并将其作为边距放在{ {1}}因为看起来你希望页眉和页脚伸展完整。如果要将#main的高度强制设置为屏幕高度，则应将其高度设置为#main减去页眉和页脚的高度。如果页眉和页脚的高度均为50px：

100vw

如何在体内对齐div以保持特定的高度和宽度

2 个答案: