我已经使用 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"> © ABC Group. All Rights
Reserved </footer>
</body>
</html>我该如何解决这个问题？我不知道是什么原因造成的。
我主持这个网站是为了展示当前的观点。 http://sampledreamstore.000webhostapp.com
最佳答案
这叫做 margin collapse .您看到的是主页内容区域的正常行为(无边距折叠)，因为 .content 的第一个子元素是 strong，它没有边距。但是在其余页面上，.content 的第一个 child 是一个 h2，它有一个很大的顶部边距，在父级之外折叠。
要修复它，我会删除子页面上 h2 上的 margin-top 并将其替换为一致的 padding-top 在 .content 中。您还可以像在子页面上那样在所有页面上使用 h2。或者您可以将 padding: 1px 或 border: 1px transparent 应用于 .content，这将禁用边距折叠并将其保留在 .内容.
关于jquery - 灵活的 div 高度主要内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42768916/