Question

我目前正在开发一个响应式设计的网站（我正在尝试）。我已经编写了很长时间的HTML和CSS编码，但我不熟悉高度和宽度百分比的使用。

我的网站设计非常简单，它实际上是我的简历，投资组合等的个人网站。它只是一个单页网站。

设计看起来像这样

enter image description here

在每个颜色块中，有一个背景图像适合白线和文本。

我的问题是：我以前从未使用百分比（我希望我的网站能够做出回应）。

所以我已经完成了我的积木，但在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>

Answer 1

您必须记住在使用％和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>

CSS高度，百分比而不是像素

1 个答案: