html - 菜鸟 div 标签问题 - 自动调整大小和定位

Question

一天中的大部分时间我都在为自己开发一个网站，学习响应式(Reactive)导航栏并使其正常工作，但现在我想添加更多内容，但我似乎遗漏了一些内容。导航菜单在调整大小时一切正常，我已经在我的手机上检查过了。我现在的问题是我添加的下一个 div 没有出现在导航栏下面，而是在它后面，就像导航栏 div(标题)的高度值为 0。

该网站已上线，因此我可以在手机上查看。 cscustomsbikes.co.uk

我相当确定对于有经验的人来说这是一个简单的修复，但我正在努力。

我曾尝试将页眉 div 高度设置为自动，但没有奏效。我可以添加一个固定的高度并且工作正常，但是当页面缩小到移动尺寸时，弹出菜单会扩展到 pageinfo div 而不是将其向下推......因为它是固定的。

源代码:

$(function(){
  $('#menu').slicknav();
});

    @charset "utf-8";
    /* CSS Document */
    
    .body {
    	max-width: 1200px;
    	height: auto;
    	margin-left: auto;
    	margin-right: auto;
    	padding-left: 10px;
    	padding-right: 10px;
    	}
    
    .header{
    	height:inherit;
    }
    	
    .logo {
    	float:left;
    	width: 200px;
    	height:auto;
    	display: block;
    	}
    	
    .Navlinks{
    		font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu 
    Sans Condensed", Helvetica, Arial, "sans-serif";
    		font-size: 18px;
    		font-style: normal;
    		text-decoration: underline;
    		color:#B0AAAA;
    }
    
    ul.menu{
    	margin:0;
    	padding-top:0px;
    }
    
    .pageinfo {
    	border-color: #000000;
    	border-top:3px;
    	border-bottom: 3px;
    	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    	background-color: #FB070B
    }
    
    
    
    	/*Global view*/
    @media(min-width:769px){
    
    
    ul.menu{
    	padding-top:20px;
    }
    
    ul.menu li{
    	height:auto;
    display:block;
    float:right;
    padding-left:20px;
    }
    
    	.slicknav_menu{
    		display:none;
    	}
    	
    }
    
    	/*Tablet View*/
    @media (max-width: 768px){
    	
    	
    .logo {
    		width: 170px;
    	}
    	
    ul.menu{
    		float: right;
    		list-style-type:none;	
    	}
    
    ul.menu li{
    		margin-bottom: 5px;
    	}
    	
    .Navlinks {
    	font-size: 14px;
    	}
    	
    .slicknav_menu{
    		display:none;
    	}
    	
    }
    
    
    	/*Mobile View*/
    @media (max-width: 400px){
    		
    .header {
    		height:auto;
    		float: left;
    	}
    	
    .logo {
    		width: 100px;
    	float:left;
    	}
    	
    #menu{
    		display: none;
    	}
    	
    .slicknav_menu{
    	height: auto;
    	display:block;
    	float: right;
    	}
    	
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.10/jquery.slicknav.min.js"></script>

<div id="pagebody" class="body"> </div>

<div id="header" class="header"> 
  <img src="Resources/Logos/Logo.gif" alt="C.S.Customs logo" class="logo" id="logo">
  <ul class="menu" id="menu">
    <li>
      <a class="Navlinks" href="contact.html">Contact Us</a>
    </li>
    <li>
      <a class="Navlinks" href="contact.html">Gallery</a>
    </li>
    <li>
      <a class="Navlinks" href="contact.html">Services</a>
    </li>
    <li>
      <a class="Navlinks" href="contact.html">About Us</a>
    </li>
    <li>
      <a class="Navlinks" href="contact.html">Home</a>
    </li>
  </ul>
</div>

<div id="pageinfo" class="pageinfo">Main editable region</div>
   

这最终将成为我的网站模板，页面信息将成为可编辑区域。

提前致谢。

Answer 1

每当你 float 一个元素(它是你的 lis)时，该元素的父 div(ul.menu)将不会关心它的位置并停止扩展它的大小可以包含漂浮的 child 。您正在寻找的解决方案称为 clearfix。请参阅此 SO 问题:What methods of ‘clearfix’ can I use?实现。

有关 float 元素及其含义的更多信息，例如，您可以引用 CSS Tricks ，尤其是“大崩溃”部分。