上垂直瓷磚窗口

我已經在剃刀/ MVC運行以下視圖MVC /剃鬚刀/ HTML相同的背景色：上垂直瓷磚窗口

<div class="body"> 
    <div class="content-wrapper"> 
     <div class="treewindow"> 

      <div class="treewindowtitle"> 
       TREEWVIEW TITLE 
      </div> 

      <div class="treewindowcontent"> 

       <div id="EquipmentTree"> 
        <ul> 
         <li><a>Equip Class1</a> 
          <ul> 
           <li><a>Equip1.1</a> 
            <ul> 
             <li><a>Equip1.2</a></li> 
             <li><a>Equip1.3</a></li> 
            </ul> 
           </li> 
           <li><a>Equip Class2</a> 
            <ul> 
             <li><a>Equip2.1</a></li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </div> 

      </div> 
     </div> 

     <p>Left Text 1</p> 
     <p>Left Text 2</p> 
     <p>Left Text 3</p> 

    </div> 
</div>

的想法是有爲了左定位樹視圖控制導航和上主屏幕右側將根據樹形視圖選擇出現的數據。這段代碼是這樣完成的，因爲有些數據是被加載的（所有邏輯被刪除以隔離我所遇到的問題）。

I'm使用下面的.css文件：

html 
{ 
    background-color: #e2e2e2; 
    margin: 0; 
    padding: 0; 
} 

body 
{ 
    background-color: #fff; 
    font-size: .85em; 
    border-top: solid 5px #000; 
    font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, Helvetica, sans-serif; 
    font-size: small; 
    font-weight: normal; 
    font-style: normal; 
    font-variant: normal; 
    color: #000066; 
    margin: 0; 
    padding : 0; 
} 

a { 
    color: #000066; 
    outline: none; 
    padding-left: 3px; 
    padding-right: 3px; 
    text-decoration: underline; 
} 

.float-left { 
    float: left; 
} 

.float-right { 
    float: right; 
} 

/* main layout 
----------------------------------------------------------*/ 
.content-wrapper { 
    margin: 0 auto; 
    max-width: 960px; 
} 

.body { 
    background-color: #efeeef; 
    clear: both; 
    padding-bottom: 35px; 
} 


/* Treeview control 
----------------------------------------------------------*/ 
.treewindow 
{ 
    float: left; 
    width: 200px; 
    color: #495677; 
    background-color: #efeeef; 
} 

.treewindowtitle 
{ 
    color: #fff; 
    background-color: #495677; 
    text-align: center; 
    font-size: smaller; 
} 

.treewindowcontent 
{ 
    width: 200px; 
    height: 400px; 
    overflow-y: scroll; 
    overflow-x: scroll; 
    color: #495677; 
    background-color: #efeeef; 
}

我的問題是要保持相同的背景顏色在兩個屏幕上。發生這種情況時，窗口在左側打開時會破壞屏幕背景的右側。你可以在這裏看到Fiddle：我希望雙方都有相同的背景顏色。

希望有人可以幫助我...

謝謝。

來源

2013-09-25 Mendes

兩種可能的技術，你可能會給一個嘗試：

1）使用JavaScript（或jQuery的或你有什麼），使每片含格的高度。例如，請參閱此DEMO。

2）重新裝備您的HTML，這樣可以：

它使用的是你最好find here佈局技術之一。
將高度設置爲100％，如this trick。
刪除浮動並使用table-cell。見this。

我會盡可能地選擇最後一個。希望這可以幫助！

來源

2013-09-25 21:10:32

上垂直瓷磚窗口

回答

相關問題