为什么我的网站在重新调整大小时不显示水平滚动条？

Question

该页面是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; 
} 

Answer 1

很容易的一个，你对.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 */ 
} 

Answer 2

在你的CSS设置一个min-width的身体将做的工作。

min-width CSS属性用于设置给定元素的最小宽度。它可以防止 width属性的使用值变得小于 min-width指定的值。

因此，无论您将min-width设置为1000px，只要窗口小于1000像素，滚动条就会出现。

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