页面大小调整问题。子div不像父级div调整大小
问题描述:
我现在正在为调整大小问题而苦恼。在我的网页中我有一个主要的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>
答
添加字断你的元素
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>
答
股利不调整,但由于文字是它溢出了DIV的长时间不间断的字符串。
解决方法是在.contentcolumn
上使用word-break: break-all
,这会将溢出文本移动到新行上。