但是通过F12可以审查到元素,不知怎么回事?
<div class="g-sd2">
<div class="tabarea">
<div class="tabbox">
<div class="chapterlistBox">
<div class="chapterList">
<ul>
<li class="first">
<p>
<b class="line"></b>
标题一
</p>
<ul>
<li>子标题1</li>
<li>子标题二<li>
</ul>
</li>
<li class="first">
<p>
<b class="line"></b>
标题二
</p>
<ul>
<li>子标题1</li>
<li>子标题二<li>
</ul>
</li>
<li class="first"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
.g-sd2 {
bottom: 0;
float: right;
height: 100%;
margin-left: -225px;
overflow: hidden;
position: relative;
right: 0;
top: 0;
width: 320px;
}
.g-sd2 .tabarea {
background: none repeat scroll 0 0 #f5f7fa;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
top: 153px;
width: 320px;
}
.g-sd2 .tabarea .tabbox{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.chapterlistBox {
bottom: 0;
height: 100%;
left: 0;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
.chapterList {
border-top: 0 none;
font-size: 12px;
padding-bottom: 1em;
padding-top: 20px;
position: relative;
text-align: left;
z-index: 999;
}
.chapterList .first {
font-size: 14px;
margin-bottom: 20px;
}
.chapterList .first p {
padding-left: 41px;
position: relative;
}
.chapterList .first p .line {
border: 1px solid #ddd;
left: 20px;
position: absolute;
top: 10px;
width: 15px;
}
.chapterList .first ul li {
line-height: 40px;
padding-left: 30px;
position: relative;
}
.chapterList .first ul li a {
color: #333;
display: block;
font-size: 14px;
text-decoration: none;
}
和你的css有关,由于你最外层的div的position: relative;你通过审查元素应该可以看到他占据的时间高为 0。你设置了height 100%,这个也应该参考它的父dom height。当你把position修改为 absolute 后,就能看到了你的Div了。
另外我感觉你的css有些不够严谨,例如,同一个对象里面有top,又有bottom,已经float 到right,然后又设置 right等。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。