комплекс CSS позиционирование

Я хочу, чтобы достичь этого позиционирование с помощью CSS:комплекс CSS позиционирование

enter image description here

Но лучше я получить после нескольких дней попыток заключается в следующем:

enter image description here

Можете ли вы помочь мне достичь этого позиционирования с учетом:

красные комментарии в «попробовать» картины (см JSFiddle ниже) указывает на некоторые основные ограничения
, что позиционирование должно работать на IE8 +, FF10 +, Chrome, Opera, Safari (с использованием CSSPie и selectivizr для совместимости IE8)

Вот 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: центр всегда на том же уровне, что и слева и справа. В реальной ситуации первый .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

Он использует некоторые оболочки диву с position: relative; и пользовательскими дополнениями, содержащая абсолютно позиционированные элементы с 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; 
}

источник

2014-01-05 14:29:45

комплекс CSS позиционирование

ответ

Смежные вопросы