Question

我想让我的网站适合浏览器我试过这个，当我尝试“宽度= 100％身高= 100％“对于身体的css它确实没问题，当我尝试使用容器的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;
}

我有麻烦帮助我plzzz

Answer 1

如果要在％中应用height，则父元素应明确设置高度。

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

更新：Solved Fiddle

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

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

4 个答案: