Html 为什么我的DIV在调整大小时会显示文本DIV？

没什么问题。如果不重新调整尺寸，它看起来很棒。但当它被重新调整大小时，一切都会被渲染

主要问题是导航；调整大小后，它会覆盖主文本并与主文本发生冲突。还有，当布局调整大小时，我将如何整理布局？我希望页眉无论大小都能看起来很好

多谢各位

HTML

现场演示

---

导航元素是浮动的。所以，它没有高度。为了给它一个高度，你需要在它的底部放一些东西来清除漂浮物。我在班上用了你的一个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>

---

您的问题是文本没有响应，您可以通过使用媒体查询使其响应。你需要做的是缩小你的web浏览器窗口，找到问题的解决方案，然后你可以改变字体大小等@Jezzabeanz谢谢你的提醒！快速提问。就个人而言，你设计网站的目的是什么？标准尺寸的屏幕尺寸是多少？有多少媒体查询？谢谢。我试着将我的设计为完全响应，具有无缝断点。使用一个框架，比如Bootstrap、Buffic 5，或者如果你想要稍微轻一点的东西，只需要一个网格系统：但是这里有一些用于你的媒体查询的常见断点，从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;
}

<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>