标题图标、标题和导航栏在屏幕调整大小时溢出标题容器答案

【问题标题】：Header icon, title and navbar spill out of header container on screen resize标题图标、标题和导航栏在屏幕调整大小时溢出标题容器
【发布时间】：2019-02-04 21:10:55
【问题描述】：

在图像上调整我的标题图标、标题和导航栏溢出我的标题，它设置为占据屏幕高度的 10%。我尝试在标题 div 中设置元素高度，但这似乎没有任何作用。

任何帮助将不胜感激。图像（图标溢出标题）和下面的代码。让我知道是否可以进一步澄清。

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

【问题讨论】：

你发布的截图是你想要的行为吗？请发布更多描述性屏幕截图，或在 codepen.io/pen 之类的沙箱中重现您的问题（您可以使用 placehold.it/50x50 作为占位符图像）
嗨，Paul，coops 的制作基本上是我所追求的。使用我的代码（甚至是他的代码），我的图标和标题中的文本会不断调整大小，直到它们脱离容器并与标题下方的内容重叠。如果有帮助，可以提供更多信息。谢谢 - i_stack

标签： html css

【解决方案1】：

我认为可能是您的float:left; 将所有内容都推出了。您可以在横幅 div 上尝试 display:flex; 吗？我在下面修改了你的代码，看看：

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

刚刚更改了横幅的背景颜色以显示它被包含。

【讨论】：

嗯...超级好奇。即使我使用您的代码，您的代码似乎也确实像我希望的那样执行 - 除了 img 不使用屏幕大小调整大小和没有导航栏，但大概这些对于成功来说并不是必不可少的你的代码的工作。我没有你拥有的 div 名称（尽管我可能会将它们更改为那个）但大概它们也不是必需的。我没有在我的代码中包含“什么”或导航栏下方的第二行文本，认为它们无关紧要。如果不是这样，请告诉我。谢谢你的帮助。 i_stack
我的 img 现在也消失了（无论图像大小如何），请忽略上面评论中的“没有导航栏”。我不认为我使用砖石来排列标题下方的图像是相关的.. i_stack
@i_stack 我不确定我是否理解您的要求。您介意发送您的页面链接，或将您的内容粘贴到 jsfiddle 中吗？你有一个你希望它最终看起来像什么的图像吗？也许我可以建议一种替代方法来实现您的最终结果。
嘿合作伙伴 - 我用代码创建了一个 jsfiddle：jsfiddle.net/L3mo6ghz。如果不是立即显现，请不要太担心。
Grweat，谢谢@i_stack。这是您想要使用的实际/最终代码吗？我认为我的回答非常符合最初的问题 - 您能否更清楚地解释一下我还能如何提供帮助？

【解决方案2】：

嘿，我希望这个 codepen 示例可以帮助您在响应式标题中使用如下图片： https://codepen.io/anon/pen/yZXREE

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

【讨论】：

感谢 krsna - 我认为简化的 html 结构是 coops 和我登陆的地方。