Question

我正忙着发布时事通讯，背景图片无法在简报中使用，所以我尝试用1px边框解决这个问题。顶部和底部阴影工作正常，但我无法将左侧和右侧置于100％高度，所以也许有人会对此有所帮助吗？

HTML：

 <table width="702" cellspacing="0" cellpadding="0">
      <tr>
           <td width="72" valign="top"><img src="logo-ro.png" alt="" /></td>
           <td colspan="2" valign="top">
                <div style="border-top : 1px solid #e3e8ec;"><div style="border-top : 1px solid #e3eaf2;"><div style="border-top : 1px solid #e1eaf3;"><div style="border-top : 1px solid #e1eaf1;"><div style="border-top : 1px solid #e2ebf2;"><div style="border-top : 1px solid #e2ebf2;"><div style="border-top : 1px solid #e4ebf3;"><div style="border-top : 1px solid #e7ebf4;"><div style="border-top : 1px solid #e8ecf5;"><div style="border-top : 1px solid #e9edf6;"><div style="border-top : 1px solid #eaedf6;"><div style="border-top : 1px solid #ecf1f7;"><div style="border-top : 1px solid #ecf1f7;"><div style="border-top : 1px solid #edf2f6;"><div style="border-top : 1px solid #eff2f7;"><div style="border-top : 1px solid #f1f5f8;"><div style="border-top : 1px solid #f4f5f9;"><div style="border-top : 1px solid #f5f6f8;"><div style="border-top : 1px solid #f6f6f8;"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
           </td>
      </tr>
      <tr>
           <td width="19" valign="top">
                <div style="border-left : 1px solid #e3e8ec;"><div style="border-left : 1px solid #e3eaf2;"><div style="border-left : 1px solid #e1eaf3;"><div style="border-left : 1px solid #e1eaf1;"><div style="border-left : 1px solid #e2ebf2;"><div style="border-left : 1px solid #e2ebf2;"><div style="border-left : 1px solid #e4ebf3;"><div style="border-left : 1px solid #e7ebf4;"><div style="border-left : 1px solid #e8ecf5;"><div style="border-left : 1px solid #e9edf6;"><div style="border-left : 1px solid #eaedf6;"><div style="border-left : 1px solid #ecf1f7;"><div style="border-left : 1px solid #ecf1f7;"><div style="border-left : 1px solid #edf2f6;"><div style="border-left : 1px solid #eff2f7;"><div style="border-left : 1px solid #f1f5f8;"><div style="border-left : 1px solid #f4f5f9;"><div style="border-left : 1px solid #f5f6f8;"><div style="border-left : 1px solid #f6f6f8;"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
           </td>
           <td valign="top">fdsfsfsdf</td>
           <td width="19" valign="top">
                <div style="border-right : 1px solid #e3e8ec;"><div style="border-right : 1px solid #e3eaf2;"><div style="border-right : 1px solid #e1eaf3;"><div style="border-right : 1px solid #e1eaf1;"><div style="border-right : 1px solid #e2ebf2;"><div style="border-right : 1px solid #e2ebf2;"><div style="border-right : 1px solid #e4ebf3;"><div style="border-right : 1px solid #e7ebf4;"><div style="border-right : 1px solid #e8ecf5;"><div style="border-right : 1px solid #e9edf6;"><div style="border-right : 1px solid #eaedf6;"><div style="border-right : 1px solid #ecf1f7;"><div style="border-right : 1px solid #ecf1f7;"><div style="border-right : 1px solid #edf2f6;"><div style="border-right : 1px solid #eff2f7;"><div style="border-right : 1px solid #f1f5f8;"><div style="border-right : 1px solid #f4f5f9;"><div style="border-right : 1px solid #f5f6f8;"><div style="border-right : 1px solid #f6f6f8;"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
           </td>
      </tr>
      <tr>
           <td colspan="3" valign="top">
                <div style="border-top : 1px solid #f6f6f8;"><div style="border-top : 1px solid #f5f6f8;"><div style="border-top : 1px solid #f4f5f9;"><div style="border-top : 1px solid #f1f5f8;"><div style="border-top : 1px solid #eff2f7;"><div style="border-top : 1px solid #edf2f6;"><div style="border-top : 1px solid #ecf1f7;"><div style="border-top : 1px solid #ecf1f7;"><div style="border-top : 1px solid #eaedf6;"><div style="border-top : 1px solid #e9edf6;"><div style="border-top : 1px solid #e8ecf5;"><div style="border-top : 1px solid #e7ebf4;"><div style="border-top : 1px solid #e4ebf3;"><div style="border-top : 1px solid #e2ebf2;"><div style="border-top : 1px solid #e2ebf2;"><div style="border-top : 1px solid #e1eaf1;"><div style="border-top : 1px solid #e1eaf3;"><div style="border-top : 1px solid #e3eaf2;"><div style="border-top : 1px solid #e3e8ec;"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
           </td>
      </tr>
 </table>

Answer 1

尝试给div的左右层次结构中最里面的div赋予一些高度。

<div style="border-left : 1px solid #f6f6f8; height: 100px;"></div>

请参阅此处的小提琴：http://jsfiddle.net/z4DFy/

Answer 2

立即放弃这种方法。

相反，请使用CSS box-shadow（ fiddle example ）。

E.g。

box-shadow: 0 0 28px 14px #E3EAF2 inset;

此属性有6个参数：

左偏移
top offset
模糊
spread（可选 - 默认情况下 0 ）
颜色
插入（可选）

通讯阴影制作100％的高度

2 个答案: