網站沒有反應

-1

我現在正在建立一個簡單的網站，有一個標題，一個垂直導航和一個內容框，我在一些小事情上失敗了。建立HTML結構網站沒有反應

<html> 
    <head> 
     <title>Website</title> 
     <link href="style.css" type="text/css" rel="stylesheet"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="header"></div> 
      <div class="nav_content_container"> 
       <div class="nav"></div> 
       <div class="content"></div> 
       <div class="floatkiller"></div> 
      </div> 
     </div> 
    </body> 
</html>

，並給它一些CSS後

body { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: lightgray; 
} 

.container { 
    height: 100%; 
    width: 77%; 
    margin: 0px auto; 
    background-color: white; 
    border: 3px solid black; 
} 

.header { 
    height: 20%; 
    width: 100%; 
    background-color: yellowgreen; 
    border-bottom: 3px solid black; 
} 

.nav_content_container { 
    height: 80%; 
    width: 100%; 
    background-color: azure; 
} 

.nav { 
    height: 100%; 
    width: 20%; 
    float: left; 
    background-color: palevioletred; 
    border-right: 3px solid black; 
} 

.content { 
    height: 100%; 
    width: 80%; 
    float: left; 
    background-color: cornflowerblue; 
} 

.floatkiller { 
    float: none; 
    clear: both; 
}

我的網站在beeing responsiv失敗或者是準確的，我的網站獲取是一個身高超過100％，我content箱滴出nav_content_container。如果我沒有給出任何邊界，一切都沒問題，但是在應用邊界後，我的網站被破壞了。爲什麼邊界將一切都打破？

來源

2017-06-04 Leonzen

-1

因爲您在px中給出邊框。將它們更改爲%。它會得到修復。

來源

2017-06-04 17:26:07 Aman

您需要將<meta name="viewport" content="width=device-width , initial-scale=1">加入您的<head>標記中。你還需要使用@media query以便在特定分辨率下一個元素的變化，就像這樣：

@media screen (max-width: 1366px) 
{ 
    /* element that changes on specific screen resouliton*/ 
    /* h1 { color: red; } AS AN EXAMPLE */ 
}

但是，如果你使用的是引導，那麼你需要做的唯一事情，就是添加像col-lg-x類， col-md-xcol-xs-x（「x」是1-12之間的數字），這些類爲您完成工作。

在此處閱讀：http://getbootstrap.com/css/#grid-options

來源

2017-06-04 17:52:21

網站沒有反應

回答

相關問題