頁面大小調整問題。子div不像父級div調整大小

Question

我現在正在爲調整大小問題而苦惱。在我的網頁中我有一個主要的div和內部該div我有幾個div.the主div現在是可以重新調整大小，但當我調整頁面大小時，子div內容已經不在主側div的一側了。滾動條我怎樣才能解決這個問題

.contentcolumn { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    margin-left:108px; 
 
    margin-right:48px; 
 
    height: calc(100% - (150px + 50PX)); 
 
    
 
} 
 
     body,html{ 
 
      
 
    
 
    height: 100%; 
 
     } 
 
    

<div class="contentcolumn"> 
 
    <div>hai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    
 
    <div>hai</div> 
 

Answer 1

添加字斷你的元素

http://www.w3schools.com/cssref/css3_pr_word-break.asp

.contentcolumn { 
 
     border-width: 1px; 
 
     border-style: solid; 
 
     margin-left:108px; 
 
     margin-right:48px; 
 
     height: calc(100% - (150px + 50PX)); 
 
     word-break: break-all; 
 
    }

<div class="contentcolumn"> 
 
    <div>hai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>haihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihaihai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    <div>hai</div> 
 
    
 
    <div>hai</div> 
 
    
 
</div>

Answer 2

股利不調整，但由於文字是它溢出了DIV的長時間不間斷的字符串。

解決方法是在.contentcolumn上使用word-break: break-all，這會將溢出文本移動到新行上。