Question

我现在正在建立一个带有标题，垂直导航和内容框的简单网站，而我在一些小事情上失败了。构建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;
}

我的网站未能做出响应或准确无误，我的网站的高度超过100％且我的content框从nav_content_container中退出。如果我没有给任何边框，一切都没问题，但在应用边框后我的网站被破坏了。为什么边界会破坏一切？

Answer 1

您需要将<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 */
 }

但是，如果您使用的是Bootstrap，那么您唯一需要做的就是添加类col-lg-x，col-md-x col-xs-x（＆＃34; x＆＃34;是一个从1到12的数字，这些课程为你做的工作。

在此处阅读：http://getbootstrap.com/css/#grid-options

Answer 2

因为你在px给出了边框。将它们更改为%。它将得到修复。

网站没有响应

2 个答案: