html - 为什么我的 DIV 在调整大小时覆盖我的文本 div？

Question

问题不大。不调整大小时看起来很棒。但是当它重新调整大小时，一切都会发挥作用。

主要问题是导航；调整大小时，它会覆盖主文本并与其发生碰撞。另外，调整大小时我将如何整理布局？无论大小如何，我都希望页眉始终看起来不错。

谢谢。

HTML

<div class="wrapper">
    <div class="header">
    <div class="company-text"> Kidderminster Electronic Recycling</div>
    <nav>
        <a href="#">Contact</a>
        <a href="#">FAQ</a>
        <a href="#">Recycling</a>
        <a href="#">Where we collect</a>
        <a href="#">Home</a>
    </nav>
    <div class="clear"></div>
    </div>
        <div class="main-content">dfgf</div>
        <div class="footer">xxzxczxczxcz</div>
    </div>

CSS

body, html {
    margin: 0 0;
    height: 100%;
}

@font-face {
    font-family: TCB_____;
    src: url('TCB_____.ttf');
}

.wrapper {
    width: 100%;
    height: 100%;
    background-color: yellow;
}

.header {
    width: 100%;
    background: black;
    height: 20%;
}

nav {

    background-color: #222;
    padding: 0;
    padding-right: 5%;
    width: 45%;
    display: inline-block;
    float: right;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


nav a { color: #F9F9F9; display: block; float:right;  padding: 10px;  }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }

a {
    outline: 0;
    text-decoration: none;
    font-family: TCB_____; /* no .ttf */
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 1.0037500100376em;
}



.clear {
    clear: both;
}

.company-text {
    font-family: TCB_____; /* no .ttf */
    font-size: 1.5em;
    padding-left: 5%;
    letter-spacing: 0.3em;
    color: white;
    text-transform: uppercase;
    float: left;
    width: 45%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.main-content {
    background:url('all-electronics-recycling-home.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    height: 75%;
}

.footer {
    height: 5%;
    background: black;
    width: 100%;
    outline: 0;
    text-decoration: none;
    font-family: TCB_____; /* no .ttf */
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.8em;
    color:white;
    text-align: center;
}

现场演示 http://jsfiddle.net/48ajumza/

Answer 1

#nav 元素是 float 的。所以，它没有高度。为了给它一个高度，你需要在它的底部放一些东西来清除 float 。我使用了你的一个 .clear 类的 div。

<div class="wrapper">
    <div class="header">
    <div class="company-text"> Kidderminster Electronic Recycling</div>
    <nav>
        <a href="#">Contact</a>
        <a href="#">FAQ</a>
        <a href="#">Recycling</a>
        <a href="#">Where we collect</a>
        <a href="#">Home</a>
        <div class="clear"></div>
    </nav>
    <div class="clear"></div>
    </div>
        <div class="main-content">dfgf</div>
        <div class="footer">xxzxczxczxcz</div>
    </div>