body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}
/*可使得總整體物件被擺設至瀏覽器水平正中間9999999999999999999999999999999999999999999999999999999999999999999999999999999999999*/
/*
#caixa{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
*/
/*可使得總整體物件被擺設至瀏覽器水平正中間6666666666666666666666666666666666666666666666666666666666666666666666666666666666666*/

/*最左側區域-本區域可用於IE6_999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999*/
#framecontentTop{ /*本部分是[上方區域]*/
position: absolute; 
top: 0px;   
width: 400px; /*\|/20250722C左側區寬度*/
height: 140px; /*\|/20250719C_本列是[上方區域的高度]++++Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white; 
}

#framecontentBottom{ /*本部分是[底部區域]*/
position: absolute;
top: auto;
bottom: 0px; /*本列是[底部區域]離瀏覽器最下方的距離，若設置為0，則代表此[底部區域]與瀏覽器最下方緊密連接*/
width: 400px;  /*\|/20250722C左側區寬度*/ 
height: 160px; /*\|/20250719B_本列是[底部區域的高度]++++Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{ /*本部分是[中間區域]*/
position: fixed; 
top: 140px; /*\|/20250719C[中間區域與頂部之間的距離]=[上方區域的高度]_本列是[中間區域與頂部之間的距離]Set top value to HeightOfTopFrameDiv*/
margin-left:auto;
margin-right: auto;
bottom: 160px; /*\|/20250719B[中間區域與底部之間的距離]=[底部區域的高度]_本列是[中間區域與底部之間的距離]，將本列數值下降時，中間區域越大，必須將瀏覽器高度縮小才能跑出scroll bar來觀測++++Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #ff0;
    width: 400px; /*\|/20250722C左側區寬度*/
word-wrap: break-word;  /* word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */    
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 140px 0 160px 0; /*\|/20250723B甲、這是因為IE6看不懂top跟bottom，因此必須利用padding從頂部向下擠壓\|/20250719C & 從底部向上擠壓\|/20250719B++++Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack++++\|/20250723B乙(接續甲)、然後再將被擠壓後的中心區域高度提升到100%*/
height: 100%; 
}
/*最左側區域-本區域可用於IE6_66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666*/
/*由左往右數第2欄88888888888888888888888888888888888888888888888888888888888888888888888888*/
#SecondColTop{ /*本部分是[右上方區域]*/
position: absolute; 
top: 0px; /*\|/20250719C[中間區域與頂部之間的距離]=[上方區域的高度]_本列是[中間區域與頂部之間的距離]Set top value to HeightOfTopFrameDiv*/
left: 400px;
margin-left:auto;
margin-right: auto;
bottom: 260px; /*\|/20250722B[中間(或說右上角)區域與底部之間的距離]=[底部區域的高度]_本列是[中間(或說右上角)區域與底部之間的距離]，將本列數值下降時，中間區域越大，必須將瀏覽器高度縮小才能跑出scroll bar來觀測++++Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: green;
    width: calc(100% - 400px - 300px); /*瑋倫精闢自行研究出20250721將右側區塊寬度設定成水平全部填滿瀏覽器並扣除左側方塊水平長度。瑋倫經驗：減號前後要有空格。 參考 https://blog.csdn.net/bj_chengrong/article/details/109503453  */
word-wrap: break-word;  /* word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */        
}



#SecondColbottom{ /*本部分是[右下角區域]*/
position: absolute; 
top: auto;
left: 400px;
margin-left:auto;
margin-right: auto;
bottom: 0px; /*本列是[底部區域]離瀏覽器最下方的距離，若設置為0，則代表此[底部區域]與瀏覽器最下方緊密連接*/
overflow: auto; 
background: #ff0;
    width: calc(100% - 400px - 300px); /*瑋倫精闢自行研究出20250721將右側區塊寬度設定成水平全部填滿瀏覽器並扣除左側方塊水平長度。瑋倫經驗：減號前後要有空格。 參考 https://blog.csdn.net/bj_chengrong/article/details/109503453  */
word-wrap: break-word;  /* word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */        
height: 260px; /*\|/20250722B_本列是[底部區域的高度]++++Height of bottom frame div*/    
}

/*由左往右數第3欄88888888888888888888888888888888888888888888888888888888888888888888888888*/
#willyRight2Top{ /*本部分是[右上方區域]*/
position: fixed; 
top: 0px; /*\|/20250719C[中間區域與頂部之間的距離]=[上方區域的高度]_本列是[中間區域與頂部之間的距離]Set top value to HeightOfTopFrameDiv*/
right: 0px;
margin-left:auto;
margin-right: auto;
bottom: 44%; /*\|/20250722D[中間(或說右上角)區域與底部之間的距離]=[底部區域的高度]_本列是[中間(或說右上角)區域與底部之間的距離]，將本列數值下降時，中間區域越大，必須將瀏覽器高度縮小才能跑出scroll bar來觀測++++Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: pink;
    width: 300px; /*瑋倫精闢自行研究出20250721將右側區塊寬度設定成水平全部填滿瀏覽器並扣除左側方塊水平長度。瑋倫經驗：減號前後要有空格。 參考 https://blog.csdn.net/bj_chengrong/article/details/109503453  */
word-wrap: break-word;  /* word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */            
}

#tsairright2bottom{ /*本部分是[右上方區域]*/
position: fixed; 

right: 0px;
margin-left:auto;
margin-right: auto;
bottom: 0px; /*\|/20250722B 本列是[右下角區域與底部之間的距離]=0，使得與瀏覽器最底部貼緊*/
overflow: auto; 
/*overflow-wrap: break-word;*/ /* 可以讓連結或是長文字不會造成跑版。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */
word-wrap: break-word;  /* word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */
background: red;
    width: 300px; /*瑋倫精闢自行研究出20250721將右側區塊寬度設定成水平全部填滿瀏覽器並扣除左側方塊水平長度。瑋倫經驗：減號前後要有空格。 參考 https://blog.csdn.net/bj_chengrong/article/details/109503453  */
height: 44%; /*\|/20250722D_本列是[底部區域的高度]++++Height of bottom frame div*/        
}