複雑なCSSの私はCSSを使用してこの位置を達成したい位置

：複雑なCSSの私はCSSを使用してこの位置を達成したい位置

enter image description here

しかし、私は試行の日後に得られる最善のがこれです：

enter image description here

あなたは私を助けることができますその配置を達成する：

「試す」写真の赤いコメントは

（IE8の互換性のためにCSSPieとselectivizrを使用して）位置決めがIE8 +、FF10 +、クロム、オペラ、Safariで動作する必要があることを

いくつかの主要な制約を示す（以下JSFiddleを参照してください）

ここでは、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 &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; 
}

出典

2014-01-05 Oliver

つの質問：ある#center常に#leftと#rightよりも高い？ –

@chadocat：centerは常に左右のレベルと同じレベルです。実際の状況では、最初の.blocはpageHeaderと同じレベルにあります。 – Oliver

、あなたも慎重に目的の外観のための寸法を微調整する必要があります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%; }

出典

2014-01-05 14:57:50 Abhitalks

この提案をありがとうございます。しかし、あなたが提供するデザインは、多くの要件を満たしていません。たとえば、#centerは使用可能な領域を使用しません。限界が外に出るまで左右に伸びる能力は疑問だ...私が提案した基準に基づいていくつかのテストを行いますが、最初のアプローチでは結果に自信がありません。 – Oliver

こんにちは。私は多くの試行錯誤を重ねてきましたが、あなたの最初の提案が要求された要件を満たさなくても、私の願いを満たす完全な設計を構築することができたのは確かに非常に良い基礎でした。ありがとうございました！私は今FF10とIE8のためにそれをテストし、それがうまくいくことを願っています。 – Oliver

ボーダーボックスモデルを使用することは適切な方法です。ここで

は、私は頻繁に使用する構造体である：demo

それはheight: 100%;とoverflow :auto;との絶対位置のエレメントを含む、いくつかのposition: relative;とラッパーのdivとカスタムパディングを使用しています。

これは微調整が必要ですが、要点はわかります。このような複雑なレイアウトのため

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

出典

2014-01-05 14:29:45

複雑なCSSの私はCSSを使用してこの位置を達成したい位置

答えて

関連する問題