網頁內容侷限於窗口大小調整

我正在使用asp.net web應用程序。當我水平重新調整窗口大小時，所有網頁內容都會聚集在一起，但是當我垂直重新調整大小時，會出現垂直方向滾動。網頁內容侷限於窗口大小調整

如何在重新調整大小時顯示水平滾動？

下面是我的CSS代碼

html { 
    background-image: url("../Images/water2.jpg") ; 
    -webkit-background-size: cover; /*for webKit*/ 
    -moz-background-size: cover; /*Mozilla*/ 
    -o-background-size: cover; /*opera*/ 
    background-size: cover; /*generic*/ 
    background-color:#668B8B; 
    background-size: 100%; 
    margin: 0; 
    width:80%; 
    height:auto; 
    padding: 25px 5px; 
    padding-bottom:5px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:0px; 

} 

body { 
    background-image: url("../Images/headercool.jpeg"); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
    overflow:auto; 
    background-size: 100%; 
    color: #333; 
    font-size: .85em; 
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 



} 

a { 
    color: #333; 
    outline: none; 
    padding-left: 3px; 
    padding-right: 3px; 
    text-decoration: underline; 
} 

    a { 
    color: #333; 
    outline: none; 
    padding-left: 3px; 
    padding-right: 3px; 
    text-decoration: underline; 
} 

    a:link, a:visited, 
    a:active, a:hover { 
     color: #333; 
    } 

    a:hover { 
     background-color: #c7d1d6; 
    } 

header, footer, hgroup, 
nav, section { 
    display: block; 
} 

mark { 
    background-color: #a6dbed; 
    padding-left: 5px; 
    padding-right: 5px; 
} 

.float-left { 
    float: left; 
    font-weight: 700; 
    color: #000000; 
    font-size: medium; 
} 

.float-right { 
    float: right; 
} 

.clear-fix:after { 
    content: "."; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

h1, h2, h3, 
h4, h5, h6 { 
    color: #000; 
    margin-bottom: 0; 
    padding-bottom: 0; 
} 

h1 { 
    font-size: 2em; 
} 

h2 { 
    font-size: 1.75em; 
} 

h3 { 
    font-size: 1.2em; 
} 

h4 { 
    font-size: 1.1em; 
} 

h5, h6 { 
    font-size: 1em; 
} 

    h5 a:link, h5 a:visited, h5 a:active { 
     padding: 0; 
     text-decoration: none; 
    } 

/* main layout 
----------------------------------------------------------*/ 
.content-wrapper { 
    margin: 0 auto; 
    max-width: 960px; 
} 

#body { 
    background: url("../Images/pop.jpg"); 
    -webkit-background-size: cover; /*for webKit*/ 
    -moz-background-size: cover; /*Mozilla*/ 
    -o-background-size: cover; /*opera*/ 
    background-size: cover; /*generic*/ 
    background-color: #C2DFFF; 
    clear: both; 
    padding-bottom: 35px; 
    margin-left:auto; 
    margin-right:auto; 
    height: auto; 
    min-height:600px; 

} 

    .main-content { 
     background: url("../Images/accent.png") no-repeat; 
     padding-left: 10px; 
     padding-top: 30px; 

    } 

    .featured + .main-content { 
     background: url("../Images/heroAccent.png") no-repeat; 
    } 

header .content-wrapper { 
    padding-top: 0px; 



} 

footer { 
    clear: both; 
    position:absolute; 
    background-color: #e2e2e2; 
    font-size: .8em; 
    height:0px; 
    top: 384px; 
    left: 5px; 
} 


/* site title 
----------------------------------------------------------*/ 
.site-title { 
    color: #c8c8c8; 
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace; 
    font-size: 2.3em; 
    margin: 0; 
} 

.site-title a, .site-title a:hover, .site-title a:active { 
    background: none; 
    color: #c8c8c8; 
    outline: none; 
    text-decoration: none; 
}

來源

2013-06-25 Amrit Sharma

嘗試min-width，像這樣：

body { 
    min-width: 1000px; 
}

這將水平滾動條添加到瀏覽器中，一旦你調整頁面大小的身體下方1000個像素寬。

這裏是關於CSS min-width property的文檔

來源

2013-06-25 03:17:11

網頁內容侷限於窗口大小調整

回答

相關問題