CSS: 居中相对内的绝对位置 div 问题
CSS: absolute position inside centered relative div issue
我对绝对和相对定位有疑问。
我试图将包含所有绝对 div 的相对 DIV 居中。我遇到的问题是,当我尝试将我的亲戚 DIV 居中时,我的绝对 div“#mainForm”会缩小(高度问题)。
在下面的html中,如果您删除“#main”class上的位置和边距属性,您将看到页面布局显示正确。
如何在不影响我的绝对 div 的情况下将我的相对 div 居中?
** 我想要实现的是只有我的#mainForm 是可滚动的。
我的 sideBar、mainHeader 和 mainFooter 必须是 "fixed"。客户要求...
谢谢大卫
这是我的 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. -->
</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>
我修改了你的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,可以随意删除它并在需要的地方添加高度,比如侧边栏。
我对绝对和相对定位有疑问。
我试图将包含所有绝对 div 的相对 DIV 居中。我遇到的问题是,当我尝试将我的亲戚 DIV 居中时,我的绝对 div“#mainForm”会缩小(高度问题)。
在下面的html中,如果您删除“#main”class上的位置和边距属性,您将看到页面布局显示正确。
如何在不影响我的绝对 div 的情况下将我的相对 div 居中?
** 我想要实现的是只有我的#mainForm 是可滚动的。 我的 sideBar、mainHeader 和 mainFooter 必须是 "fixed"。客户要求...
谢谢大卫
这是我的 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. -->
</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>
我修改了你的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,可以随意删除它并在需要的地方添加高度,比如侧边栏。