如何用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％的瀏覽器高度和寬度？

回答

相關問題