爲什麼我的網站在重新調整大小時不顯示水平滾動條？

該頁面是http://conmifianza.com。當您調整頁面大小時，水平滾動條不會出現。爲什麼我的網站在重新調整大小時不顯示水平滾動條？

的CSS：

@charset "utf-8"; 
/* CSS Document */ 
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,q,s,strong,sub,sup,tt,var,b,u,i,center,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,footer,header,menu,section{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0} 
.clearfix:after { 
    visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; 
} 
* html .clearfix    { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */ 
html{ 
    height:100%; 
} 
body{ 
    color: white; 
    font-family: nexa_regular; 
    margin:0px; 
    padding:0px; 
    background:url("../img/fondo.jpg") transparent no-repeat; 
    -webkit-background-size:cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size:cover; 
    height:100%; 
} 
.All{ 
    width:100%; 
    height:auto; 
    min-height:100%; 
    position:relative; 
} 
.Head{ 
    position:relative; 
    width: 1001px; 
    height:120px; 
    margin: 40px auto 33px; 
    margin-bottom:0px; 
    margin-top:.7%; 
    /*background-color:#00F;*/ 
} 
#Logo{ 
    width:120px; 
    height:120px; 
    float:left; 
    /*background-color:#090;*/ 
} 
#content{ 
    position: relative; 
    width: 1000px; 
    margin: 40px auto 33px; 
    margin-top:.7%; 
    margin-bottom:10px; 
    overflow:hidden; 
} 
#titulo{ 
    position: absolute; 
    right: 0px; 
    bottom: 0px; 
    width: 384px; 
    height: auto; 
    font-size:21px; 
    text-align:right; 
    color:red; 
} 

#contbody{ 
    width: 100%; 
    height: 355px; 
    position: relative; 
    overflow:hidden; 
    font-family:calibri; 
} 
#cont_slider{ 
    position:relative; 
    width:100%; 
    height:355px; 
    overflow:hidden; 
} 
/*.somos{ 
    background-image:url(../img/quienessomos/banner_01.jpg); 
    background-position: 50% 50%; 
    background-repeat: no-repeat no-repeat; 
}*/ 
#image1{ 
    position:absolute; 
    background-color:rgba(255,255,255,.7); 
    top:39px; 
    left:20px; 
    width:200px; 
    height:100px; 
    z-index:999; 
} 
#contfoot{ 
    position:relative; 
    width: 100%; 
    height: 145px; 
    padding-bottom:30px; 
} 
#menu{ 
    width: 100%; 
    height: 145px; 
    position: relative; 
    /*background: url('') transparent center no-repeat;*/ 
    border:none; 
} 

#socmed{ 
    width: 24px; 
    height: 58px; 
    position: absolute; 
    right: -30px; 
    bottom: 0px; 
    /*background: url('') transparent center no-repeat;*/ 
} 
.menuitem{ 
    overflow:hidden; 
    width: 125px; 
    height: 145px; 
    float: left; 
    cursor: pointer; 
}

來源

2014-02-27 Alvaro

很容易的一個，你對.All財產overflow: hidden;集。 overflow: hidden;將隱藏當前視圖外的任何內容。

更改.All代碼如下：

.All { 
width: 100%; 
height: auto; 
min-height: 100%; 
position: relative; 

}

這是改變：

.All { 
width: 100%; 
height: auto; 
min-height: 100%; 
position: relative; 
/*overflow: hidden; Remove this */ 
}

來源

2014-02-27 16:32:01 Travis

在你的CSS設置一個min-width的身體將做的工作。

min-width CSS屬性用於設置給定元素的最小寬度。它可以防止 width屬性的使用值變得小於 min-width指定的值。

因此，無論您將min-width設置爲1000px，只要窗口小於1000像素，滾動條就會出現。

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

來源

2014-02-27 16:40:26 theClap

我會避免使用w3schools作爲參考;他們經常得到很多錯誤的東西。有關原因，請參閱[w3fools]（http://www.w3fools.com/），並使用類似[Mozilla開發者網絡]（https://developer.mozilla.org/en-US/）的替代方法。 – TylerH

我明白了，我並沒有聲稱這個具體的上下文是不正確的。我建議你提供一個不同的，更好的來源，因爲如果這是Travis或其他人看到的第一個來源，他們可能會很快養成使用它作爲其主要來源的習慣，這對於學校來說會很糟糕。直到w3schools開始認真對待準確性（和其他問題）之前，它不應該樂意散佈在像這樣的網站上，這會嘗試作爲編碼問答的完整參考。 – TylerH

爲什麼我的網站在重新調整大小時不顯示水平滾動條？

回答

相關問題