/*
****
文字過長時，自動截斷、換下一行，見google講義：
https://www.google.com/search?q=html+%E6%96%87%E5%AD%97%E9%81%8E%E9%95%B7+%E8%87%AA%E5%8B%95%E6%88%AA%E6%96%B7+%E6%8F%9B%E4%B8%8B%E4%B8%80%E8%A1%8C&oq=html+%E6%96%87%E5%AD%97%E9%81%8E%E9%95%B7+%E8%87%AA%E5%8B%95%E6%88%AA%E6%96%B7+%E6%8F%9B%E4%B8%8B%E4%B8%80%E8%A1%8C&aqs=chrome..69i64j5i10i44.17583j0j4&sourceid=chrome&ie=UTF-8

****
●B系列分析scrollbar

****
overflow: hidden; <~同時杜絕因著總整體模塊區域所產生的水平&垂直scrollbar
overflow-x: scroll; 會強制顯示水平捲軸，而 
overflow-x: auto; 則會在內容超出時才自動顯示。 
*/
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden; /*●B0.本列同時杜絕因著總整體模塊區域所產生的水平&垂直scrollbar<~不是各別模塊區域內部的scrollbar，而是總整體的scrollbar*/
height: 100%; 
max-height: 100%; 
}



/*上&下方模塊區域88888888888888888888888888888888888888888888888888888888888888888888888888*/
#SecondColTop{ /*本部分是[上方模塊區域]*/
position: absolute; 
/*9999決定本模塊區域的[垂直大小]藉由設定：[本模塊區域之-上邊]與[瀏覽器頂部]的距離=0px & [本模塊區域之-下邊]與[瀏覽器底部]的距離9999999999999999999999999999999999999999999*/
top: 0px; /*\|/20250719C[中間區域與頂部之間的距離]=[上方區域的高度]_本列是[中間區域與頂部之間的距離]Set top value to HeightOfTopFrameDiv*/
bottom: 260px; /*\|/20250722B[中間(或說右上角)區域與底部之間的距離]=[底部區域的高度]_本列是[中間(或說右上角)區域與底部之間的距離]，將本列數值下降時，中間區域越大，必須將瀏覽器高度縮小才能跑出scroll bar來觀測++++Set bottom value to HeightOfBottomFrameDiv*/
/*6666決定本模塊區域的[垂直大小]藉由設定：[本模塊區域之-上邊]與[瀏覽器頂部]的距離=0px & [本模塊區域之-下邊]與[瀏覽器底部]的距離6666666666666666666666666666666666666666666*/
/*99--------------------這邊存在意義不大，砍掉無影響---------------------------------99*/
/*left: 400px;*/ /*與瀏覽器最左邊的距離++++若關閉此列，則本模塊區域會整個緊貼瀏覽器最左邊*/
margin-left:auto; /*margin-left: auto; margin-right: auto; 的主要目的是讓區塊元素在水平方向上置中，然而本模塊區域已經水平整個填滿瀏覽器，因此設定置中已經沒啥意義*/
margin-right: auto;
/*66--------------------這邊存在意義不大，砍掉無影響---------------------------------66*/

overflow: auto;  /*●●●●大重點：本列致使指定(本)區域模塊內產生scrollbar++++●B1.本列使用overflow: auto;會使本區域模塊同時生成水平scrollbar & 垂直scrollbar*/
background: green;
/*文字過長時，自動截斷、換下一行99999999999999999999999999999999999999999999*/
/*設定寬度、word-wrap: break-word;<~~此兩者全要，才可於文字過長時，自動截斷、換下一行++++●B2.若於此設定[水平width寬度] & [過長截斷換下一行]，則因水平過長會換下一行，因此會無水平scrollbar*/
width: 100%;    /*width: calc(100% - 400px - 300px);*/ /*瑋倫精闢自行研究出20250721將右側區塊寬度設定成水平全部填滿瀏覽器並扣除左側方塊水平長度。瑋倫經驗：減號前後要有空格。 參考 https://blog.csdn.net/bj_chengrong/article/details/109503453 ++++若關閉此列，則本模塊區域的寬度會變成100%完全填滿整個瀏覽器水平寬度 */
word-wrap: break-word;  /* ●B3.若將本列砍掉，則當文字過長時，因為不會自動斷行，故此會自動生成水平scrollbar ++++ word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */        
/*文字過長時，自動截斷、換下一行66666666666666666666666666666666666666666666*/
}



#SecondColbottom{ /*本部分是[下方模塊區域]*/
position: absolute; 
/*9999決定本模塊區域的[垂直大小]藉由設定：[本模塊區域之-底邊]與[瀏覽器底部]的距離=0px & [本模塊區域之高度]9999999999999999999999999999999999999999999*/
bottom: 0px; /*本列是[底部區域]離瀏覽器最下方的距離，若設置為0，則代表此[底部區域]與瀏覽器最下方緊密連接*/
height: 260px; /*\|/20250722B_本列是[底部區域的高度]++++Height of bottom frame div*/    
/*6666決定本模塊區域的[垂直大小]藉由設定：[本模塊區域之-底邊]與[瀏覽器底部]的距離=0px & [本模塊區域之高度]6666666666666666666666666666666666666666666*/
/*99--------------------這邊存在意義不大，砍掉無影響---------------------------------99*/
top: auto;
/*left: 400px;*/ /*與瀏覽器最左邊的距離++++若關閉此列，則本模塊區域會整個緊貼瀏覽器最左邊*/
margin-left:auto; /*margin-left: auto; margin-right: auto; 的主要目的是讓區塊元素在水平方向上置中，然而本模塊區域已經水平整個填滿瀏覽器，因此設定置中已經沒啥意義*/
margin-right: auto;
/*66--------------------這邊存在意義不大，砍掉無影響---------------------------------66*/

overflow: auto; /*●●●●大重點：本列致使指定(本)區域模塊內產生scrollbar++++●B1.本列使用overflow: auto;會使本區域模塊同時生成水平scrollbar & 垂直scrollbar*/
background: #ff0;
/*文字過長時，自動截斷、換下一行99999999999999999999999999999999999999999999*/
/*設定水平寬度、word-wrap: break-word;<~~此兩者全要，才可於文字過長時，自動截斷、換下一行++++●B2.若於此設定[水平width寬度] & [過長截斷換下一行]，則因水平過長會換下一行，因此會無水平scrollbar*/
width: 100%;    /*width: calc(100% - 400px - 300px);*/ /*瑋倫精闢自行研究出20250721將右側區塊寬度設定成水平全部填滿瀏覽器並扣除左側方塊水平長度。瑋倫經驗：減號前後要有空格。 參考 https://blog.csdn.net/bj_chengrong/article/details/109503453   ++++若關閉此列，則本模塊區域的寬度會變成100%完全填滿整個瀏覽器水平寬度++++然而寬度還是要給，才能藉由word-wrap: break-word;將過長文字進行斷行*/
word-wrap: break-word;  /* ●B3.若將本列砍掉，則當文字過長時，因為不會自動斷行，故此會自動生成水平scrollbar ++++ word-wrap: break-word;可用於螞蟻瀏覽器。當打了一長串很長的文字(譬如：12345678901234567890123)後，英文和 CJK 會在任意位址斷開，可以讓連結或是長文字不會造成跑版。照理來說若文字過長，會自動生成水平scrollbar，然而將長文字截斷至下一列接續後，則不會生成水平scrollbar。 參考： https://www.shubo.io/word-wrap-vs-word-break/ */        
/*文字過長時，自動截斷、換下一行66666666666666666666666666666666666666666666*/

}