Komplexe CSS Positionierung

ich diese Positionierung mit CSS erreichen wollen:Komplexe CSS Positionierung

enter image description here

Aber das Beste, was ich erhalten nach Tagen versucht, ist dies:

enter image description here

Können Sie mir helfen, erreichen diese Positionierung, unter Berücksichtigung:

die roten Kommentare in der "try" -Bild (siehe JSFiddle unten), die einige wichtige Einschränkungen
, dass die Positionierung auf IE8 +, FF10 + funktionieren sollte, Chrome, Opera, Safari (mit CSSPie und selectivizr für IE8 Kompatibilität)

Hier ist die JSFiddle und der Code:

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 &gt; min-width. <br> 
<br> 
     If left+right+center min-width &gt; 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> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --&gt; 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 &gt; min-width. <br> 
<br> 
If left+right+center min-width &gt; 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; 
}

Quelle

2014-01-05 Oliver

Eine Frage: ist die #center immer höher als #links und #rechts? –

@ chadocat: Zentrum ist immer auf gleicher Ebene als links und rechts. In der realen Situation befindet sich das erste .bloc auf derselben Ebene wie pageHeader. – Oliver

Für einen solchen komplexen Layout, zusammen mit border-box Sie müssen auch die Abmessungen für das gewünschte Aussehen sorgfältig zwicken.

prüfen diese Geige: http://jsfiddle.net/SXJuT/ (hoffe es wie Ihr Screenshot aussieht)

Vollbild: 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%; }

Quelle

2014-01-05 14:57:50 Abhitalks

Vielen Dank für diesen Vorschlag. Aber das Design, das Sie geben, erfüllt nicht viele der Anforderungen. Zum Beispiel nehmen #center nicht den verfügbaren Platz. Ich bezweifle die Fähigkeit für links und rechts zu erweitern, bis das Limit dann außerhalb von ihnen gehen, ...Ich werde einige Tests auf der Basis, die Sie vorschlagen, machen, aber ich bin nicht zuversichtlich über das Ergebnis bei einem ersten Ansatz. – Oliver

Hallo. Ich habe viele Versuche und Anpassungen gemacht, und selbst wenn Ihr ursprünglicher Vorschlag nicht den gestellten Anforderungen entsprach, war es in der Tat eine sehr gute Grundlage, auf der ich ein vollständiges Design aufbauen konnte, das meinen Wünschen entspricht. Vielen Dank ! Ich muss es jetzt nur für FF10 und IE8 testen und hoffe, dass es funktioniert. – Oliver

Mit dem Box-Box-Modell gehen ist der richtige Weg.

Hier ist eine Struktur ich oft verwenden: demo

Es einige Wrapper-div-Tags mit position: relative; und individuelle Polsterung verwendet, absolut positionierte Elemente mit height: 100%; und overflow :auto; enthält.

Es muss optimiert werden, aber Sie werden den Kern bekommen.

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; 
}

Quelle

2014-01-05 14:29:45

Komplexe CSS Positionierung

Antwort

Verwandte Themen