老师我按要求设置的高度 为什么显示下面会有空格呢?应该怎么解决呢?

老师我按要求设置的高度 为什么显示下面会有空格呢?应该怎么解决呢?

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Document</title>
 <style type="text/css">
  *{margin: 0;padding:0;}
  tbody table{border-color: #eee;}
  tbody .hang{position: relative;}
  tbody .hang .ldyg{padding-top: 20px;padding-left: 10px;}
  tbody .hang .ldyg p{margin-bottom: 15px;}
  tbody .hang .rdyg{position: absolute;top: 60px;}
  tbody .order-list img{display: block;width: 44px;height: 44px;}
  tbody .order-list td{height: 54px;}
  tbody .order-list .first-h{height: 50px;}
 </style>
</head>
<body>
 <table width="100%" cellspacing="0">
  <!-- 顶部 -->
  <thead>
   <tr>
    <td bgcolor="#07cbc9" width="100%" height="60px" valign="middle"><img src="img/logo.png"></td>
   </tr> 
  </thead>
  <!-- 主体 -->
  <tbody>
   <tr>
    <td>
     <table width="100%" height="866px"  cellpadding="0" border="1px" cellspacing="0" class="aside">
      <tr class="hang">
       <!-- 主体左侧 -->
       <td width="12%" valign="top" class="ldyg">
        <p>商品管理</p>
        <p>评价管理</p>
        <p>咨询管理</p>
        <br/>
        <br/>
        <p>全部订单</p>
        <p>已完成订单</p>
        <p>待处理订单</p>
        <p>今日物流</p>
        <br/>
        <br/>
        <p>月考核</p>
        <p>季度考核</p>
        <p>年度考核</p>
       </td>
       <!-- 主体右侧 -->
       <td width="88%" class="rdyg">
        <!-- 全部订单 -->
        <table width="100%" border="1px" cellspacing="0" cellpadding="0">
         <tr><td height="50px">全部订单</td></tr>
        </table>
        <!-- 时间查询 -->
        <table width="100%" border="1px" cellspacing="0" cellpadding="0">
         <tr>
          <td height="50px">
           
           <form>
            查询&nbsp;&nbsp;:<input type="date" name="date">至
               <input type="date" name="date">
           </form>
          </td>
         </tr>
        </table>
        <!-- 订单列表 -->
        <table border="1px" width="100%" cellspacing="0" cellpadding="0" class="order-list">
         <tr>
          <td colspan="2" class="first-h">宝贝信息</td>
          <td class="first-h">订单数量</td>
          <td class="first-h">单价</td>
          <td class="first-h">买家</td>
          <td class="first-h">下单时间</td>
          <td class="first-h">实付款</td>
          <td class="first-h">订单操作</td>
         </tr>
         <tr>
          <td><img src="img/txue.png"></td>
          <td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
          <td>2</td>
          <td>120</td>
          <td>小明</td>
          <td>2019-2-21 21:54</td>
          <td>240</td>
          <td>待付款</td>
         </tr>
         <tr>
          <td><img src="img/xie.jpg"></td>
          <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
          <td>2</td>
          <td>120</td>
          <td>小李子</td>
          <td>2019-2-21 19:04</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/txue.png"></td>
          <td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
          <td>2</td>
          <td>120</td>
          <td>小红</td>
          <td>2019-2-21 16:54</td>
          <td>240</td>
          <td>待发货</td>
         </tr>
         <tr>
          <td><img src="img/xie.jpg"></td>
          <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
          <td>2</td>
          <td>120</td>
          <td>可乐</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/txue.png"></td>
          <td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
          <td>2</td>
          <td>120</td>
          <td>魏明</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/xie.jpg"></td>
          <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
          <td>2</td>
          <td>120</td>
          <td>李晓雨</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/txue.png"></td>
          <td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
          <td>2</td>
          <td>120</td>
          <td>艳艳</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/xie.jpg"></td>
          <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
          <td>2</td>
          <td>120</td>
          <td>片片</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/txue.png"></td>
          <td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
          <td>2</td>
          <td>120</td>
          <td>小兰</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/xie.jpg"></td>
          <td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>
          <td>2</td>
          <td>120</td>
          <td>魏璎珞</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/txue.png"></td>
          <td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
          <td>2</td>
          <td>120</td>
          <td>小慕</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
         <tr>
          <td><img src="img/txue.png"></td>
          <td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
          <td>2</td>
          <td>120</td>
          <td>小苏</td>
          <td>2019-2-21 14:30</td>
          <td>240</td>
          <td>未发货</td>
         </tr>
        </table>
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </tbody>
  <!-- 页脚 -->
  <tfoot>
   <tr>
    <td bgcolor="#07cbc9" width="100%" height="60px" valign="middle">2019-9-21 ©imooc.com</td>
   </tr>
  </tfoot>
 </table>
</body>
</html>

http://img1.sycdn.imooc.com//climg/5cc5144c0001592d13660768.jpghttp://img1.sycdn.imooc.com//climg/5cc514570001592d13660768.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕糖 2019-04-29 10:05:06

同学你好,这个是因为嵌套的这个表格设置的高度866px,但是内容实际并没有这么高,左侧的没有撑起了,所以显示的是空白。而右侧的其实也是空白,但是由于边框的原因,导致看起来是多了一行,这里把高度去掉,有内容撑开即可。

http://img1.sycdn.imooc.com//climg/5cc65b2b000180da13540250.jpg

另,去掉之后,会发现底部上移,这是因为.rdyg元素,设置了绝对定位脱离文档流,建议:这里可以把定位去掉。例:

http://img1.sycdn.imooc.com//climg/5cc65bae0001c14d04200139.jpg

希望能帮助到你,欢迎采纳。

祝学习愉快!

提问者 原来是晓琪_ 2019-04-28 19:03:34

http://img1.sycdn.imooc.com//climg/5cc58817000121ab12070073.jpg

我在加一行就变成了这样 超出了

http://img1.sycdn.imooc.com//climg/5cc5888200013b0810290097.jpg

好帮手慕糖 2019-04-28 13:48:06

同学你好,你说的空格,具体是指那块?建议:可详细的描述下,便于准确的定位与解决问题。

祝学习愉快!

  • 提问者 原来是晓琪_ #1
    一。top,left,right,bottom值为0 时加不加单位都可以是吗? 二。老师 我把空格指出来了
    2019-04-28 19:08:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师