我想用CSS实现这个定位:
但经过几天尝试后我获得的最好成绩是:
考虑到这一点,你能帮我实现这个定位吗?
以下是 JSFiddle 和代码:
HTML
<body>body (all divs may have some padding, some margin and some border. All divs adjust their height to their content.)
<div id="globalcontainer"><span class="important">#globalcontainer (fixed width, not really centered into body : see center)</span>
<div id="header">#header (100%)</div>
<div id="middle">#middle (100%)
<div id="left">
<span class="important">#left (on the left of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right)</span>
<br>
<DIV class="bloc" style="width:300px;">bloc</div>
<DIV class="bloc" style="width:50px;">bloc</div>
<DIV class="bloc" style="width:500px;">bloc</div>
</div>
<div id="center"><span class="important">#center (width adjusted to globalcontainer size - left size - right size, with a fixed min-width.<br>
<br>
Stays centered on the screen whatever the left or right size are<br>
--> if left or right divs are not present in the HTML (or present with display:none), center div stays on the center of the screen)</span>
<div id="center-middlerow">#center-middlerow (100%)
<div id="pageReceiver">#pageReceiver (100%)
<div id="page">#page (100%)<br>
<div id="pageHeader">#pageHeader (100%)</div>
<div id="pageContent">#pageContent (100%)</div>
</div>
<div id="tip" style="display: block;">#tip (under page)</div>
</div>
<div style="text-align:center" id="center-bottomrow">#center-bottomrow (100%)</div>
</div>
<div id="right"><span class="important">#right (on the right of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right )</span>
<br>
<DIV class="bloc" style="width:30px;">bloc</div>
<DIV class="bloc" style="width:60px;">bloc</div>
<DIV class="bloc" style="width:90px;">bloc</div>
</div>
</div>
</div>
<div id="footer">#footer (100%)</div>
</div>
</body>
CSS
* {
font-family:Arial;
font-size:11px;
border:1px solid black;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color:rgba(125,125,125,0.1);
}
span {
border:0px;
padding:0px;
background-color:transparent;
}
span.important {
color:red;
font-weight:bold;
}
html {
border:0px;
padding:0px;
background-color:white;
}
/* Real CSS starting here */
BODY {
padding:20px;
padding-bottom:0px;
}
#globalcontainer, #left, #center, #right , #header, #footer {
margin:auto;
background-color:transparent;
display:table;
}
/* ====================================================== */
#globalcontainer {
min-width:1130px;
max-width:1130px;
width:100%;
vertical-align:top;
}
#header {
margin-bottom:10px;
vertical-align:top;
width:100%;
}
#middle {
display: table;
vertical-align:top;
}
#footer {
margin-top:10px;
vertical-align:top;
text-align:center;
width:100%;
}
/* ====================================================== */
#left {
vertical-align:top;
float:left;
padding-right:20px;
}
#center {
vertical-align:top;
display: table-cell;
width:100%;
}
#center-toprow {
padding:10px;
padding-top:0px;
}
#center-middlerow {
}
#center-bottomrow {
padding:5px;
margin-top:30px;
}
#right {
vertical-align:top;
float:right;
padding-left:20px;
}
#left DIV.bloc {
float:right;
white-space:nowrap;
}
#right DIV.bloc {
float:left;
white-space:nowrap;
}
/* ====================================================== */
#pageReceiver {
margin:auto;
width:100%;
}
#page {
cursor:default;
background-color:#F8F8F8;
border:1px solid black;
padding:20px;
width:100%;
position:relative;
min-height:591px;
}
#pageHeader {
margin:auto;
margin-bottom:15px;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
}
#tip {
margin-top:5px;
margin-left:20px;
margin-right:20px;
padding:5px;
background-color:transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
答案 0 :(得分:3)
使用边框框模型是正确的方法。
这是我经常使用的结构:demo
它使用一些包含position: relative;
和自定义填充的包装div,其中包含height: 100%;
和overflow :auto;
的绝对定位元素。
需要调整,但你会得到要点。
HTML
<div id="globalcontainer">
<div id="global-wrapper">
<div id="header"></div>
<div id="middle">
<div id="middle-wrapper">
<div id="left">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
</div>
<div id="center-wrapper">
<div id="center">
<div id="center-middlerow"></div>
<div id="center-bottomrow"></div>
</div>
</div>
<div id="right">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
CSS
*,
*:before,
*:after{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div{
border: 1px solid black;
padding: 10px;
}
html,
body{
height: 100%;
}
#globalcontainer{
height: 100%;
}
#global-wrapper{
padding: 100px 10px;
position: relative;
border: none;
height: 100%;
}
#header,
#footer{
position: absolute;
width: 100%;
height: 100px;
left: 0;
}
#header{
top: 0;
}
#middle{
height: 100%;
}
#middle-wrapper{
position: relative;
padding: 0px 200px;
border: none;
height: 100%;
}
#left,
#right{
position: absolute;
width: 200px;
height: 100%;
top: 0;
background:#F0F0F0;
overflow: auto;
}
#left{
left: 0;
}
#right{
right: 0;
}
#center{
height: 100%;
}
#center-wrapper{
border: none;
padding: 0px 10px;
height: 100%;
}
.block{
background: #fff;
}
答案 1 :(得分:0)
对于如此复杂的布局,以及border-box
,您还需要仔细调整所需外观的尺寸。
检查这个小提琴: http://jsfiddle.net/SXJuT/ (希望它看起来像你的截图)
全屏: http://jsfiddle.net/SXJuT/embedded/result/
CSS :
html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-size: 9px; }
div { border: 1px solid blue; box-sizing: border-box; padding: 2px; margin: 4px; }
#globalcontainer { width: 99%; height: 98%; background-color: #deebf7; }
#header { height: 5%; background-color: #d1e4f3; }
#middle { height: 86%; background-color: #d1e4f3; display: table; border-spacing: 4px; width: 99%; }
#footer { height: 5%; background-color: #d1e4f3; }
#left, #center, #right { display: table-cell; background-color: #c4ddf1; }
#left { width: 14%; }
#center { width: 68%; }
#right { width: 14%; }
#center-middlerow { height: 80%; background-color: #bad5eb; }
#center-bottomrow { height: 20%; background-color: #bad5eb; }
#pageReceiver { height: 78%; background-color: #b1d0ec; }
#tip { height: 16%; background-color: #b1d0ec; }
#page { height: 95%; background-color: #a7cbe9; }
#pageHeader { height: 14%; background-color: #2e75b5; }
#pageContent { height: 62%; background-color: #2e75b5; }
#pageFooter { height: 14%; background-color: #2e75b5; }
.bloc { height: 20%; background-color: #2e75b5; }
#left > .bloc:nth-child(1), #right > .bloc:nth-child(1) { width: 50%; }
#left > .bloc:nth-child(2), #right > .bloc:nth-child(2) { width: 70%; }