网站没有反应

-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

网站没有反应

回答

相关问题