2016-07-06 201 views
0

我現在正在爲調整大小問題而苦惱。在我的網頁中我有一個主要的div和內部該div我有幾個div.the主div現在是可以重新調整大小,但當我調整頁面大小時,子div內容已經不在主側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> 
 

回答

2

添加字斷你的元素

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>

0

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

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