DIV里Table的宽度设置为100%后页面出现滚动条的解决办法;DIV下移的解决办法 IE 和 FireFox 都通过

 (1)DIV里的table百分比宽度问题:

 一行两个DIV . 左边DIV宽度固定 右边的自适应 右边DIV里放置table 其 width= "100%" 此时表格会把屏幕撑宽了出现左右滚动条.这个滚动条是不该出现的!!!

table{padding:10px;100%;position:relative;} 一定要设置相对定位
.MainRightChild{100%;}

(2)
一行两个DIV . 左边DIV宽度固定 右边的自适应 右边DIV里放置table 其 width= "100%" 当窗口所小到一定程度的时候 右边的DIV会下移 经过实践发现 当两DIV宽度和大于最大宽度的时候就会这样 所以要修改最大宽度的值 使之大于两个DIV宽度和即可

.Main,.Top,.Bottom,#Menu{min- 760px; expression(document.body.clientWidth < 840? "840px": "100%" )/*最小宽度设置*/;100%;}

这里的840即是宽度最大值.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style>


 body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; 100%;height: 100%;font-size: 13px;color:#000;padding: 0px;margin: 0px;
}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h4{font-size:14px;}
p,li{padding-left:20px;padding-right:20px;}
img{border:0px}
p{padding-top:0px;line-height:20px; font-size:15px;}
table{padding:10px;100%;position:relative;}
td{text-align:center;}
span.CityBig{color:#777;}

a:link {color: #000; text-decoration:none;}
a:visited {color: #000;text-decoration:none;}
a:hover {color: #000; text-decoration:none;}
a:active {color: #000;}

ul{padding:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/margin:0px;}
ul.Normal{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}
li{margin-left:0px;list-style-type:none;padding:2px;line-height:18px;padding-left:20px;padding-right:20px;}
li.LiBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}
li.LiNormal {margin-left:30px;list-style-type:circle;}

#Menu{background-color: #FFB13E;100%;border-bottom:1px solid #ef8a04;border-top:1px solid #ef8a04;height:23px;}
#Menu li{ 90px;  padding-top:4px; padding-bottom:4px;text-align:center; float: left;margin-left:0px;padding-left:0px;padding-right:0px;}

.Main,.Top,.Bottom,#Menu{min- 760px; expression(document.body.clientWidth < 840? "840px": "100%" )/*最小宽度设置*/;100%;}
.MainLeft,.MainRight {border:1px solid #FFB13E;}
.Bottom {text-align:center;}
.MainLeft{float:left;}
.MainRight{margin-left:210px;}
.MainLeftChild{200px;}
.MainRightChild{100%;}
.MainRightChild img {150px; height:100px;border solid 2px #000;}
.MainLeftNoBorder{float:left;}
.MainRightNoBorder{margin-left:210px;}
.MainLeft li{padding:2px;}

.ArtileTitle,.ArticleDate{text-align:center;}
.ArtileTitle{font-size: 20px;font-weight:bolder;padding:10px;}
.clear{clear: both;}
.Right{text-align:right;}
.Left{text-align:left;float:left;}
</style>
 </head>
 <body  >


 


     <div class="Main">
  <div class="MainLeft">
  <div class="MainLeftChild">
  <ul class="Normal">
<li class ="LiBg">1&nbsp;&nbsp;<a href="" target="_blank" >更多>></a></li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
  </ul>
  </div>
<div class="MainLeftChild">
  <ul class="Normal">
<li class ="LiBg">1111  &nbsp;&nbsp;<a href="" target="_blank" >更多>></a></li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
  </ul>
  </div>
 <div class="MainLeftChild">
  <ul class="Normal">
<li class ="LiBg">11111 &nbsp;&nbsp;  <a href="" target="_blank" >更多>></a></li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
  </ul>
  </div>
  <!-- <div class="MainLeftChild">
  <ul class="Normal">
<li class ="LiBg">左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
  </ul>
  </div>
  <div class="MainLeftChild">
  <ul class="Normal">
<li class ="LiBg">左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
<li  >左边固定宽度</li>
  </ul>
  </div> -->
 </div>

<div class="MainRight">

            <div class="MainRightChild">

             <ul>
                <li class ="LiBg">感动中国推荐</li>
 </ul>
 
 </div>
 <div class="MainRightChild">
            <table>
<tr>
  <td><a href="#"><img src="../Images/ChinaVTLogo.gif"  alt="标题"/></a></td>
  <td><a href="#"><img src="../Images/ChinaVTLogo.gif" alt="标题"  /></a></td>
  <td><a href="#"><img src="../Images/ChinaVTLogo.gif" alt="标题" /></a></td>
  <td><a href="#"><img src="../Images/ChinaVTLogo.gif" alt="标题"  /></a></td>
</tr>
<tr>
  <td>照片说明</td>
  <td>照片说明</td>
  <td>照片说明</td>
  <td>照片说明</td>
</tr>
<tr>
 
  <td><img src="../Images/ChinaVTLogo.gif"  alt="标题" /></td>
  <td><img src="../Images/ChinaVTLogo.gif"  alt="标题"  /></td>
  <td><img src="../Images/ChinaVTLogo.gif"  alt="标题"  /></td>
  <td><img src="../Images/ChinaVTLogo.gif" alt="标题"  /></td>
</tr>
<tr>
  <td>照片说明</td>
  <td>照片说明</td>
  <td>照片说明</td>
  <td>照片说明</td>
</tr>
  </table>

            </div>
           
 </div>
     </div>

<div class="clear"></div>

<div class="Bottom">
<ul>
<li>&nbsp;</li>
<li>
 服务条款 | 隐私政策 | 免责声明

 DIV里Table的宽度设置为100%后页面出现滚动条的解决办法;DIV下移的解决办法

 (1)DIV里的table百分比宽度问题:

 一行两个DIV . 左边DIV宽度固定 右边的自适应 右边DIV里放置table 其 width= "100%" 此时表格会把屏幕撑宽了出现左右滚动条.这个滚动条是不该出现的!!!


(2)
一行两个DIV . 左边DIV宽度固定 右边的自适应 右边DIV里放置table 其 width= "100%" 当窗口所小到一定程度的时候 右边的DIV会下移 经过实践发现 当两DIV宽度和大于最大宽度的时候就会这样 所以要修改最大宽度的值 使之大于两个DIV宽度和即可

</li>
</ul>
</div>

</body>
</html>

原文地址:https://www.cnblogs.com/adandelion/p/773470.html