How to adjust 100% browser height and width with CSS?
Question
I wanted to fit my site to browser i tried this and when i try the " width=100% height=100% " for body's css it does ok and when i tried that with container's div it sort of disappears meaning the background color is not seen
This is 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>
this is 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;
}
I am in trouble help me plzzz
4 answers
solution1
0 ACCPTED 2014-03-30 10:46:47
If you want to apply height in % the parent element should have height set explicitly.
So if you simply set height property, the parent tag html doesn't have any height set so it'll take 0 height.
Update: Solved Fiddle
solution2
0 2014-03-30 10:47:13
If you want to match it to the browser you could best use this.
CSS
body {
width: 100vw;
height: 100vh;
}
the vh, and vw represent percentage according to viewport width/height;
solution3
0 2014-03-30 10:51:03
If you want the size of an element to be the size of the browser then it has to be a direct child of the body and you need to add this style to the body:
body, html {
width: 100%;
height: 100%;
}
solution4
0 2014-03-30 10:55:41
Please check this link when you set width and height
div{width:auto;height:auto;}
it will set automatically see this link
http://www.w3schools.com/cssref/playit.asp?filename=playcss_width&preval=auto
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.