如何使用CSS调整100％浏览器的高度和宽度？

Question

我想让我的网站适合浏览器，我尝试了这一点，当我尝试对身体的CSS使用“ width = 100％height = 100％”时，还可以，当我尝试使用容器的div时，它消失了，这意味着背景色不是见过

这是html：

<html>
<head>
<title>Untitled</title>
<link href="css/stylesheet1.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" /></head>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
<div id="logo">Logo</span></div>
</div><!--Logo-->
<div class="search-bar">Search BAr</div>
</div>
</div>
</body>
</html>

这是CSS

body{
width:100%;
height:100%;
margin: 0;
background:#CCC;
}
#container{
width:100%;
height:100%;
margin:0 auto;
background:#000;
}
#header{
width:100%;
 height:12%;
float:left;
background:#F00;
}
.logo{
width:50%;
height:100%;
float:left;
background:#0F0;
}
.search-bar{
width:50%;
height:100%;
float:left;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
#logo
{
width:100%;
height:100%; 
float:left;
font-size:48px; 
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}

我有麻烦帮我

Answer 1

如果要以百分比形式应用height ，则父元素应具有明确设置的高度。

因此，如果您只是设置height属性，则父标记html没有设置任何高度，因此它的高度为0。

更新： 解决小提琴

Answer 2

如果要使其与浏览器匹配，则最好使用此功能。

的CSS

body {
   width: 100vw;
   height: 100vh;
}

vh和vw代表视口宽度/高度的百分比；

Answer 3

如果您希望元素的大小等于浏览器的大小，那么它必须是主体的直接子代，您需要将此样式添加到主体：

body, html {
    width: 100%;
    height: 100%;
}

Answer 4

设置宽度和高度时，请检查此链接

div{width:auto;height:auto;}

它将自动设置，请参见此链接

http://www.w3schools.com/cssref/playit.asp?filename=playcss_width&preval=auto