html - 导航栏被以下文本覆盖

Question

我有一个带有 img 和导航栏的简单标题。我想让导航栏显示在 img 下方(这就是发生的情况)但是导航栏显示在以下文本后面。我不知道如何获取导航栏下方的文本并停止覆盖它(已经尝试清除)。

我想说的是我是这方面的新手，所以我本可以把一些非常简单的东西看一遍。

精彩的 jsfiddle 链接:http://jsfiddle.net/k2qQN/

然后这是我的 html:

<

header role="banner">
        <img src="../assets/images/autologo.png" alt="A and B automotive logo" />
        <nav role="navigation">
            <ul>
                <li><a href="#about-us/about-us.html">Services</a></li>
                <li><a href="#getting-in-touch">Getting in Touch</a></li>
                <li><a href="about-the-shop/about-the-shop.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <div role="main">
        <section id="services" title="Small overview of service">
            <h1>Title for content</h1>
            <p> At <a href="getting-in-touch">Some shop</a> Some random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following info</p>

        </section>

这是 CSS:

    html, body, #container {
    height: 100%;
    width: 100%;
    border: 1px solid black;
    font-size: 1.1em;
    }

header {
    height: 20%;
    width: 100%;
    }

img {
    height: 100%;
    width: auto;
    }

Answer 1

页眉中的图像使用页眉的所有高度。因此，要么使用此 CSS 更改图像的高度:

header img {
    height:123px; /* or another value smaller than the header's height of 100% */
}

或者不设置页眉的高度:

header {
    width:100%;
}