DIV 位置固定，内容重叠

Question

我正在创建一个粘性 header，parent DIV 固定高度，我在 div 中放置了一个徽标，还有一个 [=18] =] 用于菜单。徽标不适合 parent 容器，它重叠了。我怎样才能使它适合 Image Width:100%;这样它就只能在 parent 高度。下面是我的

 <div class="header">
   <div class="logo">  
     <img src="http://img2.thejournal.ie/inline/2305998/original/?width=545&version=2305998">
   </div>
   <div class="menu">    
     Home . Services . About  
   </div>
 </div>

请看这个fiddle： https://jsfiddle.net/fzLq3p2s/

Answer 1

您从未设置 <div class="logo">

的宽度或高度

https://jsfiddle.net/FllnAngl/fzLq3p2s/2/

固定：

.logo {
  width:100px;
  height:50px;
  float:left;
  display:inline-block;
}

:)

如果您从未设置图像所在 div 的宽度，则在 css 中使用

.logo img{
  width:100%;
  height:100%
}

将采用图片的最大宽度和最大高度，而不是最大可用高度。这应该是图像所在 div 的最大高度。因此您需要设置 div 的宽度和高度

DIV 位置固定，内容重叠

DIV Position Fixed, inner content overlapping

css

jquery

css-float