我目前正在开发一个采用响应式设计的网站(好吧，我正在努力)。 我已经编写 HTML 和 CSS 代码很长时间了，但我不熟悉高度和宽度的百分比使用。
我的网站设计非常简单，它实际上是我的简历、作品集等的个人网站。它只是一个单页网站。
设计是这样的
在每个颜色 block 中，在白线之间都有一个背景图像，其中包含文本。
我的问题是:我以前从未使用过百分比(我希望我的网站能够响应)。
所以我已经完成了我的积木，但在 CSS 中我被高度困住了。
但是图像没有出现，它没有高度!你能帮帮我吗，我试过使用最小高度等，但我从来没有得到我想要的。
非常感谢!
CSS:
body
{
background-color: #000000;
margin: 0px auto;
}
#page
{
margin: 0px auto;
font-family: Myriad Pro, serif;
font-weight: normal;
background-color: white;
}
.wrapper-intro
{
background-color: green;
height: 500px;
}
#intro
{
background: url(images/space.png);
width: 80%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
border: 1px solid black;
background-size: 100% 100%;
}
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Site</title>
</head>
<body>
<div id="page">
<div class="wrapper-intro">
<section id="intro">
<header>
Title
</header>
<nav>
</nav>
</section>
</div>
</div>
<section id="about">
<article>
</article>
</section>
<section id="portfolio">
<article>
</article>
</section>
<section id="cv">
<article>
</article>
</section>
<section id="contact">
<article>
</article>
</section>
</body>
</html>
最佳答案
你必须记住，当你在 css 中使用 % 时，父容器需要有一个设置的高度/宽度。你做对的是说你希望 #intro 的 100% 高度为空——这仍然是空(因为父元素没有高度)。让你的主容器，甚至主体，占据 100% 的高度和宽度，你应该很好。
试试这个介绍
#intro
{
background: url(images/space.png);
width: 80%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
border: 1px solid black;
background-size: 100% 100%;
}
好的，检查这段代码。我认为它更接近你正在寻找的东西。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site</title>
<style>
html, body
{
background-color: red;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#page
{
margin: 0px auto;
font-family: Myriad Pro, serif;
font-weight: normal;
height: 100%;
width: 100%;
}
.wrapper
{
background-color: green;
height: 32%;
width: 85%;
margin: 0px auto;
}
#intro, #about, #portfolio
{
background: url(http://cdn.sneakhype.com/wp-content/uploads/2009/01/960x500_51-30_gunmetal.jpg);
width: 80%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
border: 1px solid black;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="page">
<div class="wrapper">
<section id="intro">
<header>
Intro
</header>
<nav>
</nav>
</section>
</div>
<div class="wrapper">
<section id="about">
<header>
About
</header>
<nav>
</nav>
</section>
</div>
<div class="wrapper">
<section id="portfolio">
<header>
Portfolio
</header>
<nav>
</nav>
</section>
</div>
</div>
</body>
</html>
关于html - 使用百分比而不是像素的 CSS 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21641424/