问答详情
源自:4-3 menu

index-menu没有高度,footer会移上来

这个问题不知道怎么解决, 希望各位帮个忙。

先上图, 效果是这样:

http://img.mukewang.com/5769dcb600016bd219010952.jpg

我用chrome的开发者工具看了一下index-menu的盒子模型信息:

http://img.mukewang.com/5769dd2d0001293f01730178.jpg

发现高度为0。

相关的css代码如下:

.index-menu {
position: relative;
border-top: 4px solid #f34949;
}
.index-menu .index-menu-tips {
position: absolute;
left: 50%;
width: 154px;
height: 70px;
margin-left: -77px;
background: #F34949;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 20px;
}
.index-menu .index-menu-tips:after {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 0;
left: 0;
border-left: 77px solid transparent;
border-right: 77px solid transparent;
border-bottom: 10px solid #fff;
}

如果需要完整的文件, 我会贴出来

提问者:涮刀石 2016-06-22 08:36

个回答

  • 慕慕9620072
    2017-08-12 17:04:21

    因为position:absolute(绝对定位)会将块从文档流中抠出来,再放在应有的位置,所以不占原来文档流的位置,所有下面的部分会上移。应该改成相对定位

  • qq_柠檬_53
    2017-03-25 23:13:51

    footer加个bottom:0;就可以撑开了。

  • 慕粉3923281
    2016-09-05 22:11:50

    menu-list也是,导致learn more那里定位出错

  • martin111
    2016-07-16 11:16:17

    我也是这样的情况,到这里不知道哪里出问题了,menu撑不开

  • 愿一世欢颜
    2016-06-22 15:00:25

    是不是.index-menu那个div没写清除浮动