Question

我使用bootstrap创建了一个网页。我在设置主要内容区域时遇到问题。我将高度设置为％并给出最小高度。但是当我单击菜单项并使用jquery load（）加载html页面时，div位置在主页面和其他页面之间移动。

这是我的主页代码：

 	$(document).ready(function() {
    
    		$(".content").load("defaultcontent.html");
    
    		$(".about").click(function(e) {
    			$(".content").load("about.html");
    		});
    
    		$(".home").click(function(e) {
    			$(".content").load("defaultcontent.html");
    		});
    
    		$(".products").click(function(e) {
    			$(".content").load("products.html");
    		});
    
    		$(".contact").click(function(e) {
    			$(".content").load("contactus.html");
    		});
    
    	});

    body {
    	background-image:
    		url("https://www.airmanchallenge.com/images/backgroundSite.jpg");
    	color: white;
    }
    
    .navbar>a:hover {
    background-color: black;
    	color: white;
    }
    
    .topnav >a:hover {
    background-color: black;
    	color: white;
    }
    
    .content {
    	height: auto;
    	min-height: 400px;
    }

<!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample Page</title>
    <link
    	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    	rel="stylesheet" type="text/css" />
    <script type="text/javascript"
    	src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript"
    	src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript"
    	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    
    </head>
    <body>
    	<header class="text-center">
    		<h1>ABC Store</h1>
    		<p>some description</p>
    	</header>
    
    	<nav role="navigation" class="navbar navbar-default">
    		<!-- Collection of nav links and other content for toggling -->
    		<div id="navbarCollapse" class="collapse navbar-collapse">
    			<ul class="nav navbar-nav topnav">
    				<li><a class="home">Home</a></li>
    				<li><a class="products">Products</a></li>
    				<li><a class="contact">Contact</a></li>
    				<li><a class="about">About</a></li>
    			</ul>
    		</div>
    	</nav>
    
    	<div class="container">
    		<div class="row">
    			<span>
    				<div class="row-sm-12 row-md-12 row-lg-12 content"
    					style="background-color: lightblue;"></div>
    			</span>
    		</div>
    	</div>
    
    	<footer class="text-center"> &#169; ABC Group. All Rights
    		Reserved </footer>
    </body>
    </html>

我该如何解决这个问题？我无法得到造成这种情况的原因。

我已托管此网站以显示当前观看次数。 http://sampledreamstore.000webhostapp.com

Answer 1

这称为margin collapse。您所看到的是主页内容区域的正常行为（没有边距崩溃），因为.content的第一个孩子是strong，没有边距。但是在其他页面上，.content的第一个孩子是h2，它有一个很大的上边距，在父母之外崩溃。

要解决此问题，我会移除子页面上margin-top的{{1}}，并将其替换为h2中的一致padding-top。您也可以在子页面上的所有页面上使用.content。或者您可以将h2或padding: 1px应用于border: 1px transparent，这将禁用边距合并并将其保留在.content内。

灵活的div高度主要内容

1 个答案: