个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我已经使用 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/
25
4
0
我有以下几行代码: using XXX.PAD.PaidServices; using YYY= XXX.PAD.PaidServices.Judet; //// uncomment below fo
我正在寻找一种方法，让 LAN 中的客户端无需任何配置即可找到我的服务器应用程序的所有实例。我不想自己破解某些东西，而是想使用现有的解决方案。就个人而言，我需要用 Python 完成它，但我很乐意听到
我的“问题”或“挑战”有很多问题。但它们都不符合我的需求。好的，我开始了: 我想要一个保存可变属性的数据库。现在我将它们作为列名“硬编码”到数据库中(参见图片)。请参阅“颜色”和“尺寸”。但是如果我想
我正在为我的一个 friend 创建一个网站。我们得到了这些布局，我已经放了一个灵活的背景，可以缩放到当前的浏览器大小。但是放置在背景上的图标需要在缩放窗口时保持相对位置。意味着如果我调整窗口大小，让
案例 通常，您会使用 cellForRowAtIndexPath 委托(delegate)方法来设置单元格。单元格的信息集对于单元格的绘制方式和大小非常重要。 不幸的是，heightForRowAtI
我试图让下面的 div 变得灵活 div { min-width: 500px; max-width: 1000px; width:100%; height: 400px; margin-left:1
我在单元测试方面遇到问题。当我运行测试时，它以 "No tests found" 结束。我正在使用 AppCode 和 Quick/Nimble 框架进行单元测试，但它在 XCode 中也不起作用。
问之前，请理解我的英语不好。 我在 servlet 编程中使用 Class.forName(...) 类。当我访问 servlet 时，我从数据库中获得一行详细的 Controller 信息，指示要使
我创建了一个cron job在 GAE 灵活环境中，每 15 分钟自动运行一次。 但是在创建每个实例时，是否会为每个实例复制相同的 cron 作业？我对此不太确定。 最佳答案 不，不会为每个实例复制
div A 灵活且固定(位于窗口顶部)，具有高 z-index，因此下方的元素可以在滚动时从下方通过。 div B 位于 div A 下方，我希望它“粘”在 div A 的底部，因为在调整窗口大小时高
我是 Quick/Nimble 的新手，所以我尝试了一个简单的单元测试: import Quick import Nimble class DarkSkyTests: QuickSpec {
我创建了一个演示。关于表格单元格的灵 active ，我需要一些帮助。 我有一些表格单元格，它们的宽度应该是固定的。 但单元格由标签组成，标签可以是长文本，也可以是短文本。 基于此标签，表格单元格应该
我非常熟悉在代码中需要“水平带”的网站 - 即使他们的内容固定在 960 像素以内，他们的背景也会向左和向右“延伸”。 我知道如何做这些，如果它们只有一种颜色，或者我可以用作背景的一张图片。 最近一位
我在自己编写的网站(无框架或 CMS)上使用 Cloudflare Flexible SSL。一切正常，现在我想在整个网站上使用 HTTPS。我在 Apache Web 服务器上使用 PHP。 我想知
我有这个 Java 接口(interface): public interface Box { public void open(); public void close(); } 这个接
所以我有一个“主要”功能系统，现在可以作为 CMS 使用:用户进入编辑器并从四个模板中选择一个。在模板中，他们单击可以添加图像、文本或两者的部分。 我有一个预览屏幕，可以向他们展示他们正在制作的东西，
下面的 HTML/CSS/Javascript (jQuery) 代码显示了 #makes 选择框。选择一个选项会显示带有相关选项的 #models 选择框。 #makes 选择框偏离中心，#mode
我正在使用固定高度的图像来填充具有渐变颜色的 div，方法如下:背景:透明 url(green_bg.gif) repeat-x scroll 0 0; 但是它只填充一个等于图像高度的高度。根据其中的
我的系统的 GUI 在 1366 X 768 分辨率下运行良好。当它以不同的分辨率显示时，我需要并排滚动，而它不应该这样。此外，当我尝试在 chrome 中按 ctr+- 时，div 和部分变得困惑。
我正在尝试在 google app engine 灵活环境中使用 python 编写日志。 我想使用默认的 python 日志记录库并使用处理程序进行日志记录。这是我的代码: import loggi
我是一名优秀的程序员,十分优秀！