Question

我的网页在主页右侧显示一个巨大的白色（空白）空间。如果您转到该页面，则会出现一个水平滚动条（在所有浏览器中）。我无法弄清楚这是由什么引起的。

- 编辑--- 我的网站css：

@charset "utf-8";


body { margin:0; padding:0; color:#000000; font:normal 14.5px Open Sans, Helvetica, sans-serif; background:#ffffff;}
.footer {width: 100%;}
.main, .content, .html, .info, .info2 {padding:0; margin:0 auto; width:1000px;}
.content {border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px;}

.info { width: 570px; float: left; padding: 0px 10px; text-align: justify;}

.info2 { width: 970px;text-align: justify;}
.info2 .info2header { padding: 0px 0px 5px 0px; width: 970px;}

.info2 .bullet {padding: 5px 0px 0px 20px; font: normal 15px Open Sans, Helvetica, sans-serif; color: #000000;}

.info3 {width: 650px; float: left; padding: 0px 10px;}

.info4 {width: 100%; padding: 10px 0px 0px 0px;}
.info5 {float: left; padding: 0px 10px;}
.logo { width:320px; height:96px; padding:0; margin:0 auto; float:left;}
h1 a, h1 a:hover { color:#636363; text-decoration:none;}
h1 span { color:#78bbe6;}
h1 small { padding:0 10px; font:normal 12px Open Sans, Helvetica, sans-serif;letter-spacing:normal;}
h2 { font:normal 26px Open Sans, Helvetica, sans-serif; font-weight: 350; padding:8px 0; margin:0; color:#595959;}
h3 { font:normal 26px Open Sans, Helvetica, sans-serif; padding:8px 0; margin:0; color:#ffffff;}
h4 { padding: 5px 0px 0px 25px; margin: 0; font: normal 13px Open Sans, Helvetica, sans-serif; text-align: left; }
h4 img:hover {filter: alpha(opacity=80); opacity:0.80; -moz-opacity: 0.80; }
h5 {font: normal 26px Open Sans, Helvetica, sans-serif; line-height: 60px;font-weight: 350; margin: 10px 0px 0px 0px; color: #ffffff;}

p{padding: 24px 15px 0px 18px; margin: 0; color: #000000; font: normal 14px Open Sans, Helvetica, sans-serif; text-align: justify; }

h6 {padding: 0px 0px 20px 25px; margin: 0;font:normal 17px Open Sans, Helvetica, sans-serif; text-align: left; font-weight: 300;}
h6 a{font:normal 17px Open Sans, Helvetica, sans-serif; }
h6 a:hover{font-weight: bold;}
h7 { font:normal 34px Open Sans, Helvetica, sans-serif; font-weight: 350; padding:0; margin:0; color:#000000;}
h8 {color: #000000; font: normal 13px Open Sans, Helvetica, sans-serif; text-align: justify;}
h9 {color: #ffffff; font: normal 22px Open Sans, Helvetica, sans-serif;padding:4px 0; margin:0; }
a { color:#66ccff; font:normal 14.5px Open Sans, Helvetica, sans-serif; text-decoration: none;}

a:hover { text-decoration: none; font-weight: bold;}
.header, ul,.content .sidebar { margin:0; padding:0;}


/* header */
.header { padding:0 0 125px;}
.header_resize { margin:0 auto; width:970px; }


/* menu */

.menu_nav ul ul {display: none;}

.menu_nav ul li:hover a { color:#ffffff; text-decoration:none; background:#d00000;}

.menu_nav ul li:hover > ul {display: block;}

.menu_nav ul { position: relative; display: inline-table; list-style: none; padding: 25px 0px; float:right;}

.menu_nav ul:after {content: ""; clear: both; display: block;}

.menu_nav ul li { float:left;}

.menu_nav ul li a { border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; display: block;  padding: 16px 20px;color: #000000; text-decoration:none; font-size:14px; line-height:15px; font-weight:400;}

.menu_nav ul li.active a {color:#ffffff; text-decoration:none; background:#d00000;}

.menu_nav ul li a:hover { color:#ffffff; text-decoration:none; background:#d00000;}

.menu_nav ul ul {background: #d00000; padding: 0; border-radius: 5px; position: absolute;border-color: #b80000; border-width: thin;}

.menu_nav ul ul li {height: auto; border-style: solid; border-radius: 5px; border-color: #b80000; border-width: thin;float: none; position: relative; z-index: 1000;}

.menu_nav ul ul li a:hover {background: #a00000;}

.menu_nav ul ul li a {padding: 15px 15px 15px 15px; color: #ffffff;}    

.menu_nav ul ul ul {position: absolute; left:100%; top:0; width: 180px;}

.menu_nav ul ul ul li a:hover {background: #a00000;}



/* content */
.content {background:#fff;}

.mainbar {padding: 0px 0px 0px 0px;float:left; width:630px;}

.mainbar .ribbon {float:left;}

.mainbar img:hover {filter: alpha(opacity=80); opacity:0.8; -moz-opacity: 0.8; }


.mainbar3 {padding: 51px 0px 0px 0px; float:left; width:630px; }

.mainbar3 .ribbon{float:left;}

.sidebar {float: right; width:330px; padding: 0px 0px 0px 0px;}
.sidebar a {color: #ffffff;}

.sidebar2 {float: right; padding: 50px 0px 0px 0px; width: 330px; height: 600px;}

.sidebar2 .ribbon {float:right;}

.sidebar .table {background: #707070; text-align: center; color: #ffffff; width: 325px; height: 480px;background: linear-gradient(top, #707070 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);}

.sidebar::before {left: 0;}

.sidebar::after {right: 0;}

hr.gray{height: 1px;border: 0;color: #E0E0E0;background-color: #E0E0E0;}

.info2 .product {transform: scale(0.90);border-style:solid; border-width: 1px; border-color: #EEEEEE; border-radius: 10px; background: #ffffff; transition: all .3s ease-in-out;}
.info2 .product:hover {transform: scale(1.0);}
.info2 .divlink {font-size: 12px; color: #000000;}
.info2 .divlink:hover {font-weight: normal;}


.info2 .box1 {width: 465px; height: 200px; float: left; padding: 25px 0px 0px 0px; }

.info2 .box2 {width: 465px; height: 179px; float: right; padding: 25px 0px 20px 0px;}

.info2 .box3 {width: 465px; height: 200px; float: left; padding: 25px 0px 20px 0px;}

.info2 .box4 {width: 465px; height: 199px; float: right; padding: 25px 0px 20px 0px;}

.info2 .box5 {width: 465px; height: 200px; float: left; padding: 25px 0px 20px 0px;}

.info2 .box6 {width: 475px; height: 40px; float: left; padding: 0px 0px 20px 0px;}

.info2 .box7 {width: 475px; height: 40px; float: right; padding: 0px 0px 20px 0px;}

.info2 .rd {text-align: justify;}

.bullet { width: 433px; height: 170px; background: #F6CECE; margin-left: auto; margin-right:auto;}

.bullet2 {background: #ffffff; margin: 0;}
.map {float: right;}
.contactbar {float:right; width: 305px; background: #707070;text-align: center; color: #ffffff; height: 525px; background: linear-gradient(top, #707070 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);}
.contactbar a {color: #ffffff;}

#submit {font: 14px Open Sans, Helvetica, sans-serif; border-radius: 5px; padding: 0; border-width: thin; cursor: pointer; background-color: #e8e8e8;}
#reset {font: 14px Open Sans, Helvetica, sans-serif; border-radius: 5px; padding: 0; border-width: thin; cursor: pointer; background-color: #e8e8e8;}


<--ribbon for mainbar --->

.mainbar .ribbon { width: 630px; position: relative;color: #444; background: #fff; border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)}

.mainbar .ribbon h2 {display: block;height: 30px;line-height: 1.3;text-align: center;width: 630px;position: relative;top: 8px;color: #ffffff;text-shadow: 0 1px 1px #111;border-top: 1px solid #b00000;border-bottom: 1px solid #c80000;background: #d00000;background: linear-gradient(top, #e00000 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);}

.mainbar .ribbon h2::before,.mainbar .ribbon h2::after  {content: '';display: block;width: 0;height: 0;position: absolute;bottom: -11px;z-index: -10;border: 5px solid;border-color: #242424 transparent transparent transparent;}

.ribbon h2::before {left: 0;}

.ribbon h2::after {right: 0;}


<--ribbon for mainbar3--->

.mainbar3 .ribbon { width: 630px; position: relative;color: #444; background: #fff; border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)}

.mainbar3 .ribbon h3 {display: block;height: 30px;line-height: 1.3;text-align: center;width: 630px;position: relative;top: 8px;color: #ffffff;text-shadow: 0 1px 1px #111;border-top: 1px solid #b00000;border-bottom: 1px solid #c80000;background: #d00000;background: linear-gradient(top, #e00000 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);}

.mainbar3 .ribbon h3::before,.mainbar3 .ribbon h3::after  {content: '';display: block;width: 0;height: 0;position: absolute;bottom: -11px;z-index: -10;border: 5px solid;border-color: #242424 transparent transparent transparent;}
.ribbon h3::before {left: 0;}

.ribbon h3::after {right: 0;}



<--ribbon for sidebar2--->

.sidebar2 .ribbon {width: 330px; position: relative;color: #444; background: #fff; border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)}

.sidebar2 .ribbon h2{display: block;height: 30px;line-height: 1.3;text-align: center;width: 330px;position: relative;top: 8px;color: #ffffff;text-shadow: 0 1px 1px #111;border-top: 1px solid #b00000;border-bottom: 1px solid #c80000;background: #d00000;background: linear-gradient(top, #e00000 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);}

.sidebar2 .ribbon h2::before,.sidebar2 .ribbon h2::after {content: '';display: block;width: 0;height: 0;position: absolute;bottom: -11px;z-index: -10;border: 5px solid;border-color: #242424 transparent transparent transparent;}



<--ribbon for info2 --->

h9 { width: 465px; position: relative;color: #444; background: #fff; border: 1px solid #d2d2d2; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)}

h9 {display: block;height: 30px;line-height: 1.3;text-align: center;width: 465px;top: 8px;position: relative;color: #ffffff;text-shadow: 0 1px 1px #111;border-top: 1px solid #b00000;border-bottom: 1px solid #c80000;background: #d00000;background: linear-gradient(top, #e00000 0%, #262626 100%);border-radius: 2px 2px 0 0;box-shadow: 0 1px 2px rgba(0,0,0,0.3);}

h9::before, h9::after {content: '';display: block;width: 0;height: 0;position: absolute;bottom: -11px;z-index: -10;border: 5px solid;border-color: #242424 transparent transparent transparent;}

h9::before {left: 0;}

h9::after {right: 0;}

/*tabs*/
.tabs {
  position: relative;   
  min-height: 480px; 
  clear: both;
  margin: 35px 0;
}
.tabs1 {
  position: relative;   
  min-height: 580px; 
  clear: both;
  margin: 35px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px 30px 10px 30px; 
  border: 1px solid #ccc; 
  margin-left: -1px;
  position: relative; 
 left: 15px;
}

.tab [type=radio] {
  display: none;  
}
.tabcontent {
  position: absolute;
  background: #ffffff;
  top: 29px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
.tabcontent img{
    position: absolute;
    z-index: 1;}
.tabcontent b{
    font-size: 16px;
}

.tabcontent span{
    padding: 1.5px;
    size: 1px;
}
.tabcontent span1{
    font-style: bold;
    padding: 10px; 
    }
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .tabcontent {
  z-index: 1;
}


/* footer */
.footer { }
.footer_resize {margin: 1500px 0px 0px 0px; width:100%;}
.footer_resize1 {margin: 300px 0px 0px 0px; width:100%;}
.footer_resize2 {margin: 900px 0px 0px 0px; width:100%;}
.footer_resize3 {margin: 400px 0px 0px 0px; width:100%;}
.footer_resize4 {margin: 200px 0px 0px 0px; width:100%;}
.footer_resize5 {margin: 500px 0px 0px 0px; width:100%;}
.footer p {background: #d00000; color: #ffffff; padding:4px 0px 0px 30px; width: 100%; font: 12px Open Sans, Helvetica, sans-serif;line-height:1.5em;}
.footer p a { color: #ffffff; }




.fr { float:right;}
.clr { clear:both; padding:4px; margin:0; width:1000px; font-size:0px; line-height:0px;}

Answer 1

这是因为div与clr类有width 1000px。这就是为什么有空间

Answer 2

您有导致问题的元素.clr，宽度为1000px，设置为width:auto。该元素位于sidebar。在页脚上，您有一个width:100% padding，您需要设置box-sizing: border-box以设置100％内置padding

<强> CSS

.clr {
    clear: both;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 4px;
    width: auto; /* Set this rule */
}

.footer p {
    background: #d00000 none repeat scroll 0 0;
    box-sizing: border-box; /* Set this rule */
    color: #ffffff;
    font: 12px/1.5em Open Sans,Helvetica,sans-serif;
    padding: 4px 0 0 30px;
    width: 100%;
}

<强> HTML

    <div class="sidebar">
      <div class="table">
        <h5>Connect With Us</h5>

        <h4>E-mail:</h4><h6><a href="mailto:info@oranoxis.com">info@oranoxis.com</a></h6><div class="clr"></div>    
        <h4>Tel:</h4><h6>(800) 559 - 2490<br>(858) 622 - 1958</h6>

        <div class="clr"></div>  --> HERE IS THE PROBLEM

        <h4>Address:</h4><div class="clr"></div>
        <h6>6650 Lusk Blvd. Suite B108<br>
        San Diego, CA 92121 <br>
        USA</h6><div class="clr"></div>
        <h4>Social Networks:<br>    
        <a href="https://plus.google.com/110896334542791955681/posts"><img width="50px" align="left" height="auto" style="padding: 20px 0px 0px 5px;" alt="googleplus" src="images/gp2.png"></a>
        <a href="https://www.youtube.com/user/Oranoxis"><img width="50px" align="left" height="auto" style="padding: 20px 0px 0px 20px;" alt="youtube" src="images/yt2.png"></a>

        <a href="https://www.linkedin.com/company/oranoxis-inc."><img width="50px" align="left" height="auto" style="padding: 20px 0px 0px 20px;" alt="linkedin" src="images/li2.png"></a>
        <a href="https://www.facebook.com/pages/Oranoxis-Inc/182983198390230"><img width="50px" align="left" height="auto" style="padding: 20px 0px 0px 20px;" alt="facebook" src="images/fb2.png"></a>
        </h4>

        </div></div>

主页右侧的白色空间

2 个答案: