css布局（固定）

Question

是否可以在css中創建master-detail-states布局？
我需要3個placeholders ：

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

Block A - 是orders列表。
Block B - 是所選訂單的狀態列表
Block C - 是所選訂單的詳細信息列表

每個塊都有自己的垂直滾動條，但整頁不能滾動 - 這意味着每個塊總是在自己的位置，即使我有1000個訂單，1000個細節和1000個狀態。

可以用css做到嗎？

Answer 1

它實際上是一個非常簡單的CSS布局：

在這里演示

Answer 2

這將是你的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;
}

Answer 3

也許是這樣的：

<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 4

關於卡爾斯的回答。

您也可以使用此解決方案。

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


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