HTML to CSS link not working
Question
The link in my html file is not working. I'm not sure if it's something else, though. When I run the file, nothing appears on the screen. There are supposed to be five rectangles all different colors(you might be able to figure that out). This is probably a really easy fix, but I am a beginner and am in need of some quick help. Here is my html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="play"></div>
<div id="create"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="purple"></div>
</body>
</html>
And here is my CSS:
#play {
background-color:#FF0000;
height: 70%;
width: 60%;
}
#create {
background-color:#0000FF;
position: relative;
height: 28%;
width: 60%;
top:2%;
}
#yellow {
background-color:#E2BE22;
height: 28%;
width: 39%;
position: relative;
left: 61%;
bottom: 26%;
}
#green {
background-color:#008800;
position: relative;
height: 34%;
width: 39%;
left: 61%;
bottom: 90%;
}
#purple {
background-color:purple;
position:relative;
height: 34%;
width: 39%;
left: 61%;
bottom: 160%;
}
5 answers
solution1
2 ACCPTED 2016-08-04 08:09:13
Nothing is shown because your body has zero size :
Just add this to your css:
body {
width: 100vw;
height: 100vh;
}
html, body { width: 100vw; height: 100vh; } #play { background-color:#FF0000; height: 70%; width: 60%; } #create { background-color:#0000FF; position: relative; height: 28%; width: 60%; top:2%; } #yellow { background-color:#E2BE22; height: 28%; width: 39%; position: relative; left: 61%; bottom: 26%; } #green { background-color:#008800; position: relative; height: 34%; width: 39%; left: 61%; bottom: 90%; } #purple { background-color:purple; position:relative; height: 34%; width: 39%; left: 61%; bottom: 160%; }
<div id="play"></div> <div id="create"></div> <div id="yellow"></div> <div id="green"></div> <div id="purple"></div>
solution2
1 2016-08-04 08:08:15
为您的html和body元素设置一个高度：
html, body { height: 100%; }
solution3
1 2016-08-04 08:08:32
Currently, your HTML and BODY element don't have a height. You set the elements to a percentage of zero, wich is always zero.
You need to set the height to a relative standard. Try to set your HTML and BODY height, then you can use the code you wanted.
html, body { height:100%; } #play { background-color:#FF0000; height: 70%; width: 60%; } #create { background-color:#0000FF; position: relative; height: 28%; width: 60%; top:2%; } #yellow { background-color:#E2BE22; height: 28%; width: 39%; position: relative; left: 61%; bottom: 26%; } #green { background-color:#008800; position: relative; height: 34%; width: 39%; left: 61%; bottom: 90%; } #purple { background-color:purple; position:relative; height: 34%; width: 39%; left: 61%; bottom: 160%; }
<div id="play"></div> <div id="create"></div> <div id="yellow"></div> <div id="green"></div> <div id="purple"></div>
solution4
1 2016-08-04 08:08:36
I think you would not have set the height of body and html. Add the following in you css
html, body{
height: 100%;
width: 100%;
}
solution5
1 2016-08-04 08:11:08
Since you are giving height and width in percentage, you need to give height and width for body tag
For example:
body{
height:100px; //either static or in percentage
width:100px
}
In css when you specify height or width in percentage, at least any one of its ancestor should have definite value for height/width
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.