css макет (исправлено)

Question

Возможно ли создать master-detail-states макет в css?
мне нужно 3 placeholders:

+---------------+-------+ 
|  A  | B | 
+-----------------------+ 
|   C   | 
+-----------------------+ 

Block A - список orders.
Block B - список состояний выбранного порядка
Block C - список деталей выбранного заказа

Каждый блок будет иметь собственную вертикальную полосу прокрутки, но вся страница не прокручивается - это значит, что каждый блок всегда на своем месте, даже если у меня 1000 заказов, 1000 деталей и 1000 состояний.

это можно сделать с помощью css?

Answer 1

Это на самом деле довольно просто CSS макет:

DEMO HERE

Answer 2

Может быть что-то вроде этого:

<style type="text/css"> 
    .A, .B, .C 
    { 
    overflow: scroll; 
    } 

    .A, .B 
    { 
    display: inline-block; 
    height: 30%; 
    } 

    .A 
    { 
    width: 75%; 
    } 

    .B 
    { 
    width: 25%; 
    } 

    .C 
    { 
    width: 100%; 
    height: 70%; 
    } 

</style> 

<div class="A"></div> 
<div class="B"></div> 
<div class="C"></div> 

CSS не мой конек, хотя, так что могут быть некоторые проблемы компоновки;)

Я надеюсь, что может помочь немного.

Answer 3

Идти немного на вопрос Карлса.

Вы также можете использовать это решение.

<style> 
    div#scrollable { 
    overflow:auto; 
    height:###; 
    width:###; 
    } 
</style> 


<div id="scrollable"> 
    Your divs inside here 
</div> 

Answer 4

Это будет ваш HTML:

<div id="main_div"> 
    <div id="header"> 
     <div id="a" class="placeholder"></div> 
     <div id="b" class="placeholder"></div> 
    </div> 
    <div id="c" class="placeholder"></div> 
</div> 

И это то, что вам нужно в CSS:

#main_div { 
    width:1000px; /* you can change this */ 
    height:600px; /* you can change this */ 
    overflow:hidden; 
    overflow-y:hidden; 
    overflow-x:hidden; 
} 

#a { 
    float:left; 
    width:50% 
} 

#b { 
    float:right; 
    width:50% 
} 

#c { 
    clear:both; 
    width:100% 
} 

.placeholder { 
    height:300px; 
    max-height: 300px; /* you can change this */ 
    overflow:scroll; 
    overflow-y:hidden; 
}