如何在正文中对齐 div 以保持特定的高度和宽度答案

【问题标题】：How to align div in body to stay with specific height and width如何在正文中对齐 div 以保持特定的高度和宽度
【发布时间】：2016-10-08 13:14:53
【问题描述】：

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

所以结构是这样的：

<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&w）。我有a picture，我在其中描述了#main div 应该如何与页面的其余部分一起运行。我怎样才能实现这种对齐？

P.S.：这是html标签的css：

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

【问题讨论】：

重复问题？试试这个...stackoverflow.com/questions/17141961/…

标签： javascript jquery html css angularjs

【解决方案1】：

您的#main div 应该自然地拉伸到屏幕的宽度（减去来自html 的每边的 65px 填充，尽管我会删除该填充并将其作为边距放在#main 上，因为它看起来您希望页眉和页脚完全伸展）。如果您想将#main 的高度强制为屏幕高度，您应该能够将其高度设置为100vw 减去页眉和页脚的高度。如果你的页眉和页脚都是 50px 高度：

#main {
  height: calc(100vw - 100px);
  padding-left: 65px;
  padding-right: 65px;
}

【讨论】：

好的，基本上它与 100vh 一起工作，因为我猜它应该占用视口的高度。感谢那。我现在如何强制包含的 div 占据#main div 的全部高度？
将包含的 div 的高度设置为 100%，它应该填满高度。
非常感谢大家！最后一个问题：如果页眉和页脚定位为绝对/固定，我可以保留 html 的填充，还是为 html 元素添加样式标签在任何情况下都是个坏主意？
这更像是一种偏好。我通常不会把它放在 HTML 上，而是放在 body 或 div 本身上。如果你定位绝对并固定页眉/页脚的大小，你应该没问题。

【解决方案2】：

你必须为你的 main 定义样式：

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

那么您可能想要处理溢出内容。看看，它做了什么：http://www.w3schools.com/cssref/pr_pos_overflow.asp

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

height: calc( 100% - 100px );

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

【讨论】：