开发者社区> 问答> 正文

页面的一块区域标签都在,但在页面上显示空白?

screenshot
但是通过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;
}

展开
收起
杨冬芳 2016-06-16 18:53:37 2032 0
1 条回答
写回答
取消 提交回答
  • IT从业

    和你的css有关,由于你最外层的div的position: relative;你通过审查元素应该可以看到他占据的时间高为 0。你设置了height 100%,这个也应该参考它的父dom height。当你把position修改为 absolute 后,就能看到了你的Div了。

    另外我感觉你的css有些不够严谨,例如,同一个对象里面有top,又有bottom,已经float 到right,然后又设置 right等。

    2019-07-17 19:41:48
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载