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

我想适合我的网站浏览器我试过这个，当我尝试“宽度= 100％高度= 100％”身体的CSS它确实，当我试图与容器的div它有点消失意味着背景颜色是没有看到如何用CSS调整100％的浏览器高度和宽度？

这是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

来源

2014-03-30 Radioactive

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

所以，如果你只是设置height属性，父标签html没有任何高度设置，因此它将需要0高度。

更新：Solved Fiddle

来源

2014-03-30 10:46:47

你能举个例子吗？ – Radioactive

@Radioactive检查这个http://jsfiddle.net/tilwinjoy/3F3T5/请注意，我已经给出了HTML，身体和容器的高度..如果你删除任何高度属性，其中的'％'中有高度的子元素没有任何身高.. –

我应该改变什么？身体宽度：100％; 身高：100％; margin：0; 背景：#CCC; } ＃容器{ 宽度：100％; 身高：100％; margin：0 auto; 背景：＃000; } – Radioactive

如果你想匹配到你可以最好地利用这个浏览器。

CSS

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

在VH和Vw根据视口宽度/高度代表百分比;

来源

2014-03-30 10:47:13

请记住[vw和vh不支持在IE8或以下]（http：// caniuse.com/#search=vw），如果你需要支持它 – Bojangles

如果你想要一个元素的大小是那么浏览器的大小，它是身体的一个直接的孩子，你需要这种风格补充人体：

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

来源

2014-03-30 10:51:03 Hive7

不，头是身体的直接兄弟姐妹，我想你是指孩子。 – slynagh

请检查此链接，当你设置的宽度和高度

div{width:auto;height:auto;}

它会自动设置看到此链接

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

来源

2014-03-30 10:55:41 user1686357

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

回答

相关问题