让子元素的宽高随着父元素的宽高缩放

来源：互联网发布：华为手机抢购软件编辑：程序博客网时间：2024/05/29 19:50

让子元素的宽高随着父元素的宽高缩放

html中会出现子元素的宽高大于父元素的宽高，出现溢出父元素的情况

例如：

代码：

CSS:

#wrap .personalinfo .title{    margin: 1% 1.5%;    font-size:1%;    background: rebeccapurple;}

HTML:

 <div class="title">                        你的位置：<span>首页</span>><span>个人主页</span>                        <div >fdgfgfdg</div>                        <div >fdgfgfdg</div>                        <div >fdgfgfdg</div>                        <div >fdgfgfdg</div>                        <div >fdgfgfdg</div>                        <div >fdgfgfdg</div>                        <div >fdgfgfdg</div>                    </div>

让子元素的宽高随着父元素的宽高缩放：

如图：

代码：

CSS:

#wrap .personalinfo .title{    margin: 1% 1.5%;    height: 80%;    font-size:1%;    background: rebeccapurple;}

HTML:

  <div class="title">                        你的位置：<span>首页</span>><span>个人主页</span>                        <div style="height: 10%">fdgfgfdg</div>                        <div style="height: 10%">fdgfgfdg</div>                        <div style="height: 10%">fdgfgfdg</div>                        <div style="height: 10%"> fdgfgfdg</div>                        <div style="height: 10%">fdgfgfdg</div>                        <div style="height: 10%">fdgfgfdg</div>                        <div style="height: 10%">fdgfgfdg</div>                    </div>

0 0