Question

我有一个导航包裹在标题元素和相同宽度的内容框架中，应该放在它下面。

当我在％：

中指定标题宽度时，这就是页面的样子

example1

这是在ems或pxs中指定的时间：

example2

那么为什么只是在％它没有正常工作？

HTML：（＆＃34;内容＆＃34;类仅用于设置相同的颜色）

    <header id="page-header">

        <img id="logo" .../>

        <nav class="content" id="page-nav">
            <ul>
                <li><a href="#">...</a></li>
                ...
            </ul>
        </nav>

    </header>


    <section class="content" id="content-container">            
        ...
    </section>

CSS：（只是重要部分）

    /*CSS reset*/
html, body, div, ul, li,
article, footer, header, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
}

article, footer, header, nav, section {
   display: block;
}
/*end of CSS reset*/

/*header*/

#page-header {
    margin-bottom: 3em;
    height:20%; <----- this is where exactly I have a problem 
}

#logo {
    float:left;
    display:block;
    margin-left: 30px;
    width: 420px;
}
#page-nav
{
    margin-left:30%;
    margin-right:10%;
}
#page-nav a {
    float:left;
    display: block;

    width: 12.5%;
    min-width:100px;
    height: 2em;
    line-height: 2em;

    margin: 3em 1.04%;
    vertical-align: middle;

}

#page-nav li:first-child a {
    margin: 3em 1.04% 3em 0;
}

#page-nav li:last-child a {
    margin: 3em 0 3em 1.04%;
}



/*content frame*/

#content-container {

    margin-left: 30%;
    margin-right: 10%;
    margin-bottom: 5%;

    padding: 2em 6em;
}

Answer 1

百分比高度相对于第一个position: relative容器，或者如果它们都不是html / body标记高度。我的猜测是你没有在父容器上指定一个高度，所以20％没有你想象的那么大。

看一下父容器＆＃39;高度为，并添加position: relative。然后将#page-header高度百分比设置为父容器的必要比例。

如果父容器是html <body>元素，那么试试这个：

html, body {
    height: 100%;
}

大小行为以百分比和em / px指定

1 个答案: