为什么我的网站在重新调整尺寸时不显示水平滚动条?

时间:2014-02-27 16:29:05

标签: html css resize

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

2 个答案:

答案 0 :(得分:3)

overflow: hidden;属性上设置.All非常简单。 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 */
 }

答案 1 :(得分:0)

将css中的min-width设置为正文将完成此任务。

  

min-width CSS属性用于设置给定元素的最小宽度。它阻止了   width属性的使用值变得小于为其指定的值   min-width

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

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

相关问题