头图标，标题和导航栏溢出输出接头容器上屏幕尺寸重

Question

在图像调整我的头图标，标题和导航栏溢出了我的头，它被设置为占据屏幕高度的10％。我已经尝试在头格设置元素的高度，但似乎并没有做任何事情。

任何帮助，将不胜感激。图像（图标溢出报头）和下面的代码。让我知道如果能够进一步明确。

.banner {
  z-index: 1;
  position: fixed;
  width: 100%;
  background-color: white;
  height: 10%;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 30%;
  max-height: 100%;
  margin: 0;
  float: left;
  vertical-align: middle;
}

.banner p {
  font-family: "Gentium Basic";
  text-align: left;
  display: block;
  height: 100%;
}

.banner img {
  float: left;
  padding: 5px;
  margin-top: -10px;
  height: 100%;
}

.ban1 {
  padding-top: 50px;
  vertical-align: top;
}

<div class="banner">
  <div class="wrapper">
    <p>
      <img src=UpYours.png height=1%>
      <span class="ban1" style=color:grey>What</span>
    </p>
  </div>

  <div class="navbar">
    <a href="#">me</a>
    <a href="#">you</a>
    <a href="#">what</a>
    <a href="#" class="right">today</a>
  </div>
</div>

Answer 1

我认为这可能是你的float:left;多数民众赞成推动东西展现出来。你可以尝试display:flex;横幅DIV呢？我已经修改下面的代码，看看：

.banner {
z-index: 1;
position: fixed;
width: 100%;
background-color: white;
height: 10%;
margin: 0;
padding: 0;
background: #e5fbff;

display:flex;
}

.wrapper {
width: 30%;
max-height: 100%;
margin: 0;
vertical-align: middle;
}

.wrapper p {
font-family: "Gentium Basic";
text-align: left;
display: block;
height: 100%;
margin:0;
}

.wrapper img {
max-height: 100%;
}

.ban1 {
padding-top: 50px;
vertical-align: top;
}

<div class="banner">
<div class="wrapper">
    <p>
        <img src="https://via.placeholder.com/150">
        <span class="ban1" style="color:grey;">What</span>
    </p>
</div>

<div class="navbar">
    <a href="#">me</a>
    <a href="#">you</a>
    <a href="#">what</a>
    <a href="#" class="right">today</a>
</div>
</div>

只是改变了旗帜的背景颜色向你展示它包含。

Answer 2

嘿，我希望这个codepen例子可以帮助你在响应报头有相关图片如下：https://codepen.io/anon/pen/yZXREE

<header class="p-1 sticky-top">
    Refer the codepen for the code...
</header>