Question

我的html文件中的链接无效。不过，我不确定这是不是别的。当我运行该文件时，屏幕上没有任何内容。应该有五个不同颜色的矩形（你可以想出来）。这可能是一个非常简单的解决方案，但我是初学者，需要一些快速帮助。这是我的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>

这是我的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%;
}

Answer 1

没有显示任何内容，因为您的身体零尺寸：

只需将此添加到您的css：

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

JsFiddle

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>

Answer 2

设置html和body元素的高度：

html, body { height: 100%; }

Answer 3

目前，您的HTML和BODY元素没有高度。您将元素设置为零的百分比，始终为零。

您需要将高度设置为相对标准。尝试设置HTML和BODY高度，然后就可以使用所需的代码。

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>

Answer 4

我认为你不会设置body和html的高度。在你的css中添加以下内容

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

Answer 5

由于您以百分比形式给出高度和宽度，因此您需要为body标签指定高度和宽度

例如：

body{
      height:100px; //either static or in percentage
      width:100px

    }

在css中指定高度或宽度（以百分比表示）时，至少其任何一个祖先都应该有高度/宽度的确定值

HTML到CSS链接不起作用

5 个答案: