1. 首頁
  2. 問答
  3. 不能滾動，試圖使div背景...與示例

不能滾動，試圖使div背景...與示例

2014-10-08 33 views
-2

當我有文本，經過頁面的底部，它不會讓我滾動看到更多。我確定你會在你看的時候表達我的意思。它不會讓我滾動。任何幫助表示讚賞。 www.aaronvigal.com/index.php 驗證碼：不能滾動，試圖使div背景...與示例

CSS: 
@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
.btn { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    padding: 4px 10px 4px; 
    margin-bottom: 0; 
    font-size: 13px; 
    line-height: 18px; 
    color: #333333; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    vertical-align: middle; 
    background-color: #f5f5f5; 
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); 
    background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); 
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); 
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); 
    background-image: linear-gradient(top, #ffffff, #e6e6e6); 
    background-repeat: repeat-x; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); 
    border-color: #e6e6e6 #e6e6e6 #e6e6e6; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    border: 1px solid #e6e6e6; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
    cursor: pointer; 
    *margin-left: .3em; } 
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { 
    background-color: #e6e6e6; 
} 
.btn-large { 
    padding: 9px 14px; 
    font-size: 15px; 
    line-height: normal; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.btn:hover { 
    color: #333333; 
    text-decoration: none; 
    background-color: #e6e6e6; 
    background-position: 0 -15px; 
    -webkit-transition: background-position 0.1s linear; 
    -moz-transition: background-position 0.1s linear; 
    -ms-transition: background-position 0.1s linear; 
    -o-transition: background-position 0.1s linear; 
    transition: background-position 0.1s linear; 
} 
.btn-primary, .btn-primary:hover { 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    color: #ffffff; 
} 
.btn-primary.active { 
    color: rgba(255, 255, 255, 0.75); 
} 
.btn-primary { 
    background-color: #848484; 
    background-image: -moz-linear-gradient(top, #A4A4A4, #848484); 
    background-image: -ms-linear-gradient(top, #A4A4A4, #848484); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); 
    background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); 
    background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); 
    background-image: linear-gradient(top, #6eb6de, #4a77d4); 
    background-repeat: repeat-x; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); 
    border: 1px solid #3762bc; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); 
} 
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { 
    filter: none; 
    background-color: #848484; 
} 
.btn-block { 
    width: 100%; 
    display:block; 
} 

* { 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    -o-box-sizing:border-box; 
    box-sizing:border-box; 
} 

html { 
    width: 100%; 
    height:100%; 
    overflow:hidden; 
} 

body { 
    width: 100%; 
    height: 100%; 
    font-family: 'Open Sans', sans-serif; 
    background: #092756; 
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%); 
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%); 
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%); 
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%); 
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1); 
} 
.login { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -150px 0 0 -150px; 
    width:300px; 
    height:300px; 
} 
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; } 

input { 
    width: 100%; 
    margin-bottom: 10px; 
    background: rgba(0,0,0,0.3); 
    border: none; 
    outline: none; 
    padding: 10px; 
    font-size: 13px; 
    color: #fff; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3); 
    border: 1px solid rgba(0,0,0,0.3); 
    border-radius: 4px; 
    box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2); 
    -webkit-transition: box-shadow .5s ease; 
    -moz-transition: box-shadow .5s ease; 
    -o-transition: box-shadow .5s ease; 
    -ms-transition: box-shadow .5s ease; 
    transition: box-shadow .5s ease; 
} 
input:focus { 
    box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); 
} 
input.submit{ 
    box-shadow: inset 0 5px 45px rgba(112,112,112,0.4), 0 1px 1px rgba(255,255,255,0.2); 
} 
input.submit:hover{ 
    box-shadow: inset 0 5px 45px rgba(192,192,192,0.4), 0 1px 1px rgba(255,255,255,0.2); 
} 
a.red-underline{ 
    color: ghostwhite; 
} 
.error { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -150px 0 0 -150px; 
    width:304px; 
    height:300px; 
} 
.error h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; } 

div.main{ 
    background-color: white; 
    opacity: 0.8; 
    filter: alpha(opacity=80); /* For IE8 and earlier */ 
    height:100%!important; 
    min-height:700px!important; 
    width: 85%; 
    margin: 0 auto; 
    -webkit-box-shadow:0 0 30px black; 
    -moz-box-shadow: 0 0 30px black; 
    box-shadow:0 0 30px black; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
    padding: 10px; 
} 

HTML: 
<?php 
include "prep.php"; 
include "db.php"; 
include "functions.php"; 
if(isset($_SESSION)){ 
} else { 
    header("Location: error.php"); 
} 
?> 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Login Form</title> 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
</head> 
<body> 
    <div class="main"> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
     hey<br> 
    </div> 
</body> 
</html>

來源

2014-10-08 Aaron Vigal

回答

0 
html { 
    width: 100%; 
    height:100%; 
    overflow:auto; 
}

你應該使用溢出：汽車和刪除溢出：隱藏，它會自動的根據您的網站寬度和高度放置一個滾動條，橫向和縱向。 ：D

來源

2014-10-08 02:12:08 AaronTeheni19

0

修正你的代碼中的jsfiddle：http://jsfiddle.net/xjd4hxbd/

首先你需要height:auto;根據需要伸出的div：

div.main{ 
    height:auto!important; 
}

接下來，您可以滾動，因爲您可以看到的所有內容都已隱藏。所以，你需要刪除overflow:hidden;爲html

編輯：IT似乎導致水平滾動條，在html使用：overflow-x:hidden;

來源

2014-10-08 01:25:49

+0

非常感謝！這工作！ – 2014-10-08 21:00:18

+0

@AaronVigal很高興我能幫到:) – 2014-10-08 21:01:15

+0

其實還有一個你可以幫助我，如果你不介意的話...... – 2014-10-08 21:05:06

相關問題

 相關問題