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

【问题标题】：CSS: absolute position inside centered relative div issueCSS：居中相对div问题内的绝对位置
【发布时间】：2015-07-18 01:40:24
【问题描述】：

我对绝对定位和相对定位有疑问。

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

在下面的html中，如果你去掉“#main”类的position和margin属性，你会看到页面布局显示正确。

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

** 我试图实现的是只有我的#mainForm 是可滚动的。我的 sideBar、mainHeader 和 mainFooter 必须是“固定的”。客户要求...

谢谢大卫

这是我的 CSS 和 HTML。

xhtml11.dtd 文档类型。

<head>      
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

    <style>
        html {
          box-sizing: border-box;
        }

        body {
            font-family: Helvetica,Arial,sans-serif;
            font-size: 8pt;  
        }

        *, *:before, *:after {
          box-sizing: inherit;
        }

        #main {
            position: relative;  /* 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;       
        }

        #sideBar {    
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            width: 180px;   
        }

        #mainContent {   
            position: absolute;
            top:0;
            bottom:0;
            right:0;
            left:180px; /* Width of #sideBar. */
            width: 780px;         
        }

        #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;
        }               
    </style>

</head>

<body>

    <div id="main" class="clearFix">

        <div id="sideBar" >
            <div id="topSideBar">
                <!-- Contact Logo css backgound. -->
                &nbsp;
            </div>
            <div id="middleSideBar">
                middleSideBar
            </div>
            <div id="bottomSideBar">
                bottomSideBar
            </div>              
        </div>

        <div id="mainContent">
            <div id="mainHeader">
                mainHeader
            </div>
            <div id="mainForm">

                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                mainForm
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                mainForm
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                mainForm
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                mainForm
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>
                mainForm
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>                                                           
            </div>
            <div id="mainFooter">
                mainFooter
            </div>      
        </div>

    </div>

</body>

【问题讨论】：

general layout 的绝对定位是一个非常糟糕且不灵活的选择。有更好的选择和更灵活的选择。
这段代码是错误的。我什至尝试制作一个jsfiddle.net/yhudwxux，但它不起作用。请提供一个合理的样品，我会尽力帮助你:)
我知道绝对定位不是最好的选择，但没有它我想不出办法。我的页眉和页脚需要修复，我的“mainForm”需要可滚动并具有动态高度。我看到的另一个选择是使用 javacsript 动态调整 mainForm 的大小并使用所有相对定位，但我真的不喜欢混合 css 和 js 进行布局..
如果你用这个替换css类：#main { width: 960px; } 你会看到“布局”。通过使主 div 居中，mainForm 被缩小。
jsfiddle.net/yhudwxux/1

标签： html css positioning

【解决方案1】：

我修改了你的 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 并将其定位为left:0 和right:0。我为主 div 设置了一个静态高度，您可以随意删除它并在侧边栏所需的位置添加高度。

【讨论】：

谢谢。我唯一担心的是 mainForm 高度是动态的。
不客气！不要忘记将答案标记为有效，以便可以关闭主题。