我的div沒有出現

我的#abhimanyu，#arjun，#bheem和#eklavya divs沒有出現。現在單位是百分比，但如果我把它的像素的作品，但它不會響應。任何想法爲什麼它不出現？先謝謝你！我的div沒有出現

更新：還有一個問題，在電話上，當我在文本框中輸入時，一切都不在他們的位置。

這裏是我的代碼：

function displaySignInError() { 
 
    var schoolName = document.getElementById('schoolNameBox').value.toLowerCase(); 
 
    switch (schoolName) { 
 
    case 'new horizon gurukul': 
 
     window.location = "NHGLogin.php"; 
 
     break; 
 
    default: 
 
     var schoolErrorMessage = document.getElementById('schoolErrorMessage'); 
 
     schoolErrorMessage.innerHTML = "Please Enter a valid school name, still if invalid schoold does not exist."; 
 
     schoolErrorMessage.style.color = 'red'; 
 
     
 
    } 
 
}

@import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i'); 
 

 
#abhimanyu { 
 
    z-index: -1; 
 
    background-color: green; 
 
    width: 50%; 
 
    float: left; 
 
    height: 47%; 
 
} 
 

 
#arjun { 
 
    z-index: -1; 
 
    background-color: orange; 
 
    width: 50%; 
 
    float: right; 
 
    height: 47%; 
 
} 
 

 
#bheem { 
 
    z-index: -1; 
 
    background-color: red; 
 
    width: 50%; 
 
    float: left; 
 
    height: 47%; 
 
} 
 

 
#eklavya { 
 
    z-index: -1; 
 
    background-color: purple; 
 
    width: 50%; 
 
    height: 47%; 
 
} 
 

 
#container { 
 
    width: 30em; 
 
    background-color: #eee; 
 
    height: 30em; 
 
    border-radius: 50%; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    transform: -webkit-translate(-50%, -50%); 
 
    transform: -ms-translate(-50%, -50%); 
 
} 
 

 
#wrapper { 
 
    width: 30rem; 
 
    height: 30rem; 
 
    border-radius: 50%; 
 
} 
 

 

 
#schoolSubmitButton { 
 
    margin-top: 35px; 
 
    text-align: center; 
 
    background-color: white; 
 
    border: 2px solid #fef; 
 
    height: 2em; 
 
    width: 10em; 
 
} 
 

 
#schoolName { 
 
    margin-bottom: 40px; 
 
    position: fixed; 
 
    top: 60%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    transform: -webkit-translate(-50%, -50%); 
 
    transform: -ms-translate(-50%, -50%); 
 
    text-align: center; 
 
} 
 

 
#schoolNameBox { 
 
    height: 2em; 
 
    border: none; 
 
    width: 26em; 
 
    margin-left: 0; 
 
    padding-left: 10px; 
 
} 
 

 
#schoolSubmitButton p { 
 
    position: relative; 
 
    top: 50%; 
 
    position: relative; 
 
    top: 30%; 
 
    left: 50%; 
 
    transform: translate(-50%, -70%); 
 
    transform: -webkit-translate(-50%, -70%); 
 
    transform: -ms-translate(-50%, -70%); 
 
} 
 

 
/* 
 
::-webkit-input-placeholder { 
 
    padding-left: 10px; 
 
} 
 

 
:-moz-placeholder { 
 
    padding-left: 10px; 
 
} 
 

 
:-ms-input-placeholder { 
 
    padding-left: 10px; 
 
} 
 
*/ 
 

 
#schoolErrorMessage { 
 
    text-decoration: none; 
 
    position: relative; 
 
    top: 6em; 
 
    color: black; 
 
    width: 140%; 
 
    float: left; 
 
    font-size: 15px; 
 
    position: relative; 
 
    right: 20%; 
 
} 
 

 
#schoolNameDiv { 
 
    position: fixed; 
 
    top: 60%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    transform: -webkit-translate(-50%, -50%); 
 
    transform: -ms-translate(-50%, -50%); 
 
    text-align: center; 
 
} 
 

 
#main-heading { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 24px; 
 
    z-index: 1; 
 
} 
 

 
#schoolAvatar { 
 
    height: 9em; 
 
    width: 9em; 
 
    border-radius: 50%; 
 
    position: fixed; 
 
    top: 25%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    transform: -webkit-translate(-50%, -50%); 
 
    transform: -ms-translate(-50%, -50%); 
 
} 
 

 
.footerHR { 
 
    border-top: 1px solid grey; 
 
    position: absolute; 
 
    bottom: 20px; 
 
    margin-bottom: 20px; 
 
} 
 

 
@media screen and (max-width: 530px) { 
 
    #container { 
 
    width: 96%; 
 
    height: 80%; 
 
    border-radius: 5px; 
 
    margin-top: 15px; 
 
    } 
 
    
 
    #schoolNameBox { 
 
    width: 20em; 
 
    } 
 
    
 
    #main-heading { 
 
    font-size: 22px; 
 
    } 
 
    
 
    #main-heading h2 { 
 
    margin-top: 15px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>NHG</title> 
 
    <meta charset="UTF-8"/> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
    <link type="text/css" rel="stylesheet" href="css/normalize.css"/> 
 
    <link type="text/css" rel="stylesheet" href="css/style.css"/> 
 
    <link type="text/css" rel="stylesheet" href="css/resposive.css"/> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="abhimanyu"></div> 
 
    <div id="arjun"></div> 
 
    <br> 
 
    <div id="bheem"></div> 
 
    <div id="eklavya"></div> 
 
    <header> 
 
      <div id="main-head"> 
 
       <!--  REMEMBER TO STYLE THE HEADING AND SIGN UP LINK  --> 
 
       <a href="#" id="main-heading"><h2>sKoolBook</h2></a> 
 
      </div> 
 
    </header> 
 
    <section> 
 
     <div id="container"> 
 
     <div id="wrapper"> 
 
      <img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle"> 
 
      <div id="schoolNameDiv"> 
 
      <div id="schoolName"> 
 
       <input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name..."> 
 
       <br> 
 
       <button type="submit" id="schoolSubmitButton" onclick="displaySignInError();"> 
 
       <p>Next</p> 
 
       </button> 
 
       <br> 
 
      </div> 
 
      <br> 
 
      <p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </section> 
 
    <br> 
 
    <footer> 
 
     <div class="footerHR"> 
 
     </div> 
 
    </footer> 
 
    <script src="JS/script.js"></script> 
 
    </body> 
 
</html>

來源

2016-10-22 Shreyas Sreenivasa

需要，因爲你正在使用百分比來定義家長的高度。

什麼是更好的做的是：

更改您的HTML：

<div class="show-this"> 
    <div id="abhimanyu"></div> 
    <div id="arjun"></div> 
    <div id="bheem"></div> 
    <div id="eklavya"></div> 
</div>

在你的CSS。添加以下代碼：

.show-this { 
    height: 100vh; 
    width: 100vw; 
}

或者，你可以聲明

body { 
    height: 100vh; // or something 
}

.show-this { 
 
    width: 100vw; 
 
    height: 100vh; } 
 

 
.show-this #abhimanyu { 
 
    height: 10%; 
 
    width: 80%; 
 
    background: red; } 
 

 
.show-this #arjun { 
 
    height: 20%; 
 
    width: 90%; 
 
    background: yellow; } 
 

 
.show-this #bheem { 
 
    height: 40%; 
 
    width: 50%; 
 
    background: green; } 
 

 
.show-this #eklavya { 
 
    height: 20%; 
 
    width: 100%; 
 
    background: blue; }

<div class="show-this"> 
 
    <div id="abhimanyu"></div> 
 
    <div id="arjun"></div> 
 
    <div id="bheem"></div> 
 
    <div id="eklavya"></div> 
 
</div>

希望它能幫助！乾杯。

來源

2016-10-22 08:45:46

它解決了它！但現在又出現了另一個問題。標題skoolbook不合適 –

您需要了解如何定位元素。有很多方法。我只是回答了上面的問題。 –

謝謝你的建議！ –

我的div沒有出現

回答

相關問題