为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

先上图, 效果是这样:

http://img1.sycdn.imooc.com//5769dcb600016bd219010952.jpg

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

http://img1.sycdn.imooc.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;
}

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

正在回答

5 回答

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~
#1

涮刀石 提问者

我加了清除浮动的class,但是没用。 而且应该不是浮动造成的,因为我没有用float
2016-06-22 回复 有任何疑惑可以回复我~
#2

涮刀石 提问者

不用纠结了, 我感觉是老师在我们不知道的情况下给index-menu下面的panel设置了高度。
2016-06-22 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信