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

时间:2014-02-08 03:11:53

标签: html css height percentage

我目前正在开发一个响应式设计的网站(我正在尝试)。 我已经编写了很长时间的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>

1 个答案:

答案 0 :(得分:3)

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