Html CSS：居中相对div问题内的绝对位置

我有一个绝对和相对定位的问题

我尝试将包含所有绝对DIV的相对DIV居中。问题是，当我尝试将相对DIV居中时，我的绝对DIV“#mainForm”会收缩（高度问题）

在下面的html中，如果删除“#main”类上的position和margin属性，您将看到页面布局显示正确

如何在不影响绝对div的情况下将相对div居中

**我想要实现的是只拥有可滚动的主窗体。 我的边栏、主页眉和主页脚必须是“固定的”。客户要求

谢谢大卫

这是我的CSS和HTML

• xhtml11.dtd doctype

html{
框大小：边框框；
}
身体{
字体系列：Helvetica、Arial、无衬线字体；
字号：8pt；
}
*，*：之前，*：之后{
框大小：继承；
}
#主要{
位置：相对；/*如果我删除此项，则页面不居中，但主窗体高度正常*/
边距：0自动；/*如果我删除此项，则页面不居中，但主窗体高度正常*/
宽度：960px；
}
#边栏{
位置：绝对位置；
排名：0；
底部：0；
左：0；
宽度：180px；
}
#主要内容{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：180px；/*侧边栏的宽度*/
宽度：780px；
}
#总管{
位置：绝对位置；
排名：0；
高度：40px；
宽度：100%；/*必填项。With是父div的100%*/
边框：1px纯蓝；/*用于显影*/
}
#主要形式{
位置：绝对位置；
溢出：自动；
顶部：40px；
底部：40px；
宽度：100%；/*必填项。With是父div的100%*/
边框：1px纯黄色；/*用于显影*/
}
#主页脚{
位置：绝对位置；
底部：0；
高度：40px；
文本对齐：右对齐；
宽度：100%；/*必填项。With是父div的100%*/
}
#上边杆{
位置：绝对位置；
排名：0；
左：0；
背景图片：url（“../images/pas/contactLogo.png”）；
背景重复：无重复；
高度：110px；
宽度：100%；/*必填项。With是父div的100%*/
}
#中间边栏{
位置：绝对位置；
顶部：110px；
高度：200px；
宽度：100%；/*必填项。With是父div的100%*/
}
#底部边栏{
位置：绝对位置；
底部：0；
高度：100px；
宽度：100%；/*必填项。With是父div的100%*/
}
/*clearfix*/
.clearFixaa:之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}               
中间边栏
底部边栏
总管













主要形式


























主要形式


























主要形式


























主要形式


























主要形式













主页脚

---

我修改了你的css。这将完成以下工作：

html {
    box-sizing: border-box;
}
body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8pt;
}
*, *:before, *:after {
    box-sizing: inherit;
}
#main {
    position: fixed;
    /* if I removed this, page is not centered but mainForm height is ok */
    margin: 0 auto;
    /* if I removed this, page is not centered but mainForm height is ok */
    width: 960px;
    height: 960px;
    left: 0;
    right: 0;
}
#sideBar {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    width: 180px;
    border: 1px solid red;
    /* For developing purpose */
}
#mainContent {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:180px;
    /* Width of #sideBar. */
    width: 780px;
    height: 100%;
}
#mainHeader {
    position: absolute;
    top:0;
    height:40px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
    border: 1px solid blue;
    /* For developing purpose */
}
#mainForm {
    position: absolute;
    overflow:auto;
    top:40px;
    bottom:40px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
    border: 1px solid yellow;
    /* For developing purpose */
}
#mainFooter {
    position: absolute;
    bottom:0;
    height:40px;
    text-align:right;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
}
#topSideBar {
    position: absolute;
    top:0;
    left:0;
    background-image: url("../images/pas/contactLogo.png");
    background-repeat: no-repeat;
    height:110px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
}
#middleSideBar {
    position: absolute;
    top:110px;
    height:200px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
}
#bottomSideBar {
    position: absolute;
    bottom:0;
    height:100px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
}
/* clearfix */
 .clearFixaa:after {
    content:".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

---

诀窍是固定#main div并将其定位为左：0和右：0。我对主分区有一个静态高度，可以随意删除它，并在边栏需要的地方添加高度。

总布局的绝对定位是一个非常糟糕且不灵活的选择。有更好的选项和更灵活的选项可供选择。这段代码是错误的。我甚至试着做了一个测试，但没有成功。请提供一个合理的样本，我会尽力帮助你：）我知道绝对定位不是最好的选择，但如果没有它，我想不出一个方法。我的页眉和页脚需要固定，我的“mainForm”需要能够以动态高度滚动。我看到的另一个选项是使用JavaCScript动态调整mainForm的大小，并使用所有相对定位，但我并不喜欢将css和js混合用于布局。如果用以下内容替换css类：#main{width:960px；}，您将看到“布局”。通过将主div居中，主窗体将收缩。谢谢。我唯一关心的是主窗体的高度是动态的。不客气！别忘了将答案标记为有效，这样主题就可以结束了。

html {
    box-sizing: border-box;
}
body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8pt;
}
*, *:before, *:after {
    box-sizing: inherit;
}
#main {
    position: fixed;
    /* if I removed this, page is not centered but mainForm height is ok */
    margin: 0 auto;
    /* if I removed this, page is not centered but mainForm height is ok */
    width: 960px;
    height: 960px;
    left: 0;
    right: 0;
}
#sideBar {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    width: 180px;
    border: 1px solid red;
    /* For developing purpose */
}
#mainContent {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:180px;
    /* Width of #sideBar. */
    width: 780px;
    height: 100%;
}
#mainHeader {
    position: absolute;
    top:0;
    height:40px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
    border: 1px solid blue;
    /* For developing purpose */
}
#mainForm {
    position: absolute;
    overflow:auto;
    top:40px;
    bottom:40px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
    border: 1px solid yellow;
    /* For developing purpose */
}
#mainFooter {
    position: absolute;
    bottom:0;
    height:40px;
    text-align:right;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
}
#topSideBar {
    position: absolute;
    top:0;
    left:0;
    background-image: url("../images/pas/contactLogo.png");
    background-repeat: no-repeat;
    height:110px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
}
#middleSideBar {
    position: absolute;
    top:110px;
    height:200px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
}
#bottomSideBar {
    position: absolute;
    bottom:0;
    height:100px;
    width:100%;
    /* Mandatory. With is 100% of parent div. */
}
/* clearfix */
 .clearFixaa:after {
    content:".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}