首页 新闻 搜索 专区 学院

使用子绝父相后,有没有办法让父盒子的高度被子盒子撑开,代码如下

0
悬赏园豆:30 [已解决问题] 解决于 2016-08-07 01:10

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>

  <style type="text/css">
  .one{
    background: red;
    width: 400px;
    min-height: 300px;
    position: relative;
  }
  .two{
    background:blue;
    width: 400px;
    min-height: 500px;
    height: 550px;
    position: relative;
  }
  .three{
    position: absolute;
    top: 0;
    width: 200px;
    height: 800px;
    background: gray;
  }
  </style>
  </head>
<body>
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>
</body>
</html>

木卓的主页 木卓 | 初学一级 | 园豆:124
提问于:2016-08-05 17:20
< >
分享
最佳答案
0

不好意思我试过了,body下的div无法撑开,不知道什么原因。

如果把结构写成这样如下:

 1 body>
 2     <div class="one">
 3 
 4         <div class="two">
 5             <div class="three"></div>
 6         </div>
 7         
 8     </div>
 9    
10 </body>

 

并且,讲two盒子设置成下面这样。

1 .two::after{
2         display: block;
3         content: '';
4         clear: both;
5         visibility: hidden;
6         height: 0;
7     }

three盒子可以撑开two盒子。

具体情况,给你发个网址吧。

http://blog.csdn.net/piazini/article/details/8625935

收获园豆:30
aimonengzhu | 初学一级 |园豆:193 | 2016-08-07 00:08

我把代码在复制下来也是页面没显示,two盒子改成那样了,不过还是不能撑开,这个清楚浮动的好像对绝对定位的不起作用!

木卓 | 园豆:124 (初学一级) | 2016-08-07 00:25

@木卓: 我也没办法了,同样是初学。

再贴个地址吧,他们讨论,确实不行。绝对定位你放弃吧!把父元素高度设置好就OK了。

https://segmentfault.com/q/1010000000686154

 

aimonengzhu | 园豆:193 (初学一级) | 2016-08-07 00:52

@aimonengzhu: 这么晚了,辛苦了!

木卓 | 园豆:124 (初学一级) | 2016-08-07 01:07
其他回答(2)
0

难道不能格式化代码吗?

顾晓北 | 园豆:10819 (专家六级) | 2016-08-05 17:22

好了

支持(0) 反对(0) 木卓 | 园豆:124 (初学一级) | 2016-08-07 00:07
0

设置父盒子的宽高不就行了。。

代码飞了 | 园豆:470 (菜鸟二级) | 2016-08-05 17:34

子盒子的高度是变化的啊,我想让父盒子自适应

支持(0) 反对(0) 木卓 | 园豆:124 (初学一级) | 2016-08-06 23:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册