个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我是新来注册的，因为我在现有的踏板中找不到我的答案。
我正在尝试制作一个单页网站，并且我希望“着陆页”具有完整的背景。我在整个页面上都有背景，但是当我开始在 div 中放置文本时，它就坏了。我使用了以下 css (sass):
.intro {
color: #fff;
height: 100vh;
background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center;
background-size: cover;
&--buttons {
position: absolute;
bottom: 2em;
}
}
p.hello {
margin: 30px;
}
.page1 {
color: #fff;
height: 100vh;
background: beige;
}
.page2 {
color: #fff;
height: 100vh;
background: black;
}
使用以下 HTML:
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>My title</title>
</head>
<body>
<div class="container">
<div class="row">
<div id="intro" class="intro">
<div class="text-center">
<p class="hello">
Intro text is coming soon!
</p>
<div class="col small-col-12 intro--buttons">
<p>Buttons coming here.
</p>
</div>
</div>
</div>
<div id="page1" class="col col-12 page1">
<p>Tekst test</p>
</div>
<div id="page2" class="col col-12 page2">
<p>Tekst test.</p>
</div>
</div>
</div>
</body>
</html>
您可以在此处查看结果:http://codepen.io/Luchadora/full/waYzMZ或者看我的笔:http://codepen.io/Luchadora/pen/waYzMZ
如您所见，在定位介绍文本 (p.hello {margin: 30px;}) 时，背景大小发生了变化，不再是全屏。(顺便说一句:我使用了示例背景) . 其他页面现在也有空白..
我该如何解决这个问题？我读过有关视口(viewport)的文章，但我认为为此我唯一需要的是 height: 100vh;，对吗？提前致谢!
最佳答案
你的问题是 margin collapsing :
parent 和第一个/最后一个 child
如果没有边框、填充、内联内容或间隙将 block 的顶部边距与其第一个子 block 的顶部边距分开，或者没有边框、填充、内联内容、高度、最小高度或最大-height 将 block 的 margin-bottom 与其最后一个子元素的 margin-bottom 分开，然后这些边距会折叠。折叠的边距最终在父级之外。
要解决您的问题，请向 .text-center 添加一些填充:
.text-center {padding:1px;}
关于html - CSS 视口(viewport)高度 :100vh doesn't work correctly with content in the div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31607465/
25
4
0
我正在尝试将我的 xcode 应用程序存档到 Itunes，但我得到了 following errors : 1.) “配置文件不支持推送通知。” 2.) “配置文件不包含 aps-environme
我正在尝试为我们的组织构建一个 Web 应用程序，它将使用我们的 O365 进行身份验证。在尝试使用管理员帐户连接到域时，我遇到了这个错误，其中提到 admin..onmicrosoft.com(全局
当我尝试构建 MUAI 项目时，它给出错误“该项目不知道如何运行配置文件 sample.WinUI”。项目已构建但无法运行。我使用的是 Visual Studio 2022 Preview(17.0
当某项包含在列表中时，有一个查询要搜索，但当某项不在列表中时，则没有查询。 此查询查找在给定列表 cdiffnums 中没有 ContactNum 的 customer 对象。我该怎么做才能仅返回此列
我们有一个黑盒第三方 Java 程序，可以从某个位置获取输入文件并制作 PDF。每次输入时，它都会将 list 文件放在同一位置，这需要我们以受控方式提供文件。 list (或 .xen/.que)是
我看到这个has选择器，hasnt 选择器在哪里？我想查找不包含图像的表格。 最佳答案 类似$("table:not(:has(img))")？ 关于jQuery: "Doesn' t 有“选择器？，
为什么？这让我发疯？？？ $(document).ready(function () { $('#slides1').bxSlider({ prev_
我是 kubernetes 的新手。 我无法使用 kubectl 进行部署，但我可以在 kubernetes 仪表板上看到所有部署。我该如何解决这个问题？ user@master:~$ kubectl
这个问题已经有答案了: What do querySelectorAll and getElementsBy* methods return? (12 个回答) 已关闭 6 年前。 HTML JS
我有两个数组，一个包含字符串值，另一个包含整数值，尽管这可能很愚蠢，但我陷入了困境，我需要一点帮助，我想遍历两者，如果 arr1 包含 arr2 中不存在的项目，它将被推送到 newArray 这是我
我一直在尝试为我的网站安装一个 PHP 脚本，设置所有内容，通过脚本附带的 phpMyAdmin 导入 SQL 文件，但我面对的是一个空白页面，错误如下所示: File /home/user/publ
我正在努力将站点的服务器从 PHP 5.2.17 升级到 5.5，以使其在未来的升级中保持新鲜，并安装其他需要 PHP 5.4+ 的软件。 数据库有一个我正在测试的表，其中有许多列在初始 INSERT
我一直收到这个错误: Object doesn't support this property or method 每当我在 IE7 和 IE8 中运行我的代码时。这是它停止的代码: _renderU
我想使用正则表达式排除某些单词。 输入文本: aaa1234 cc bbb1234 c1234 cc dd aacc cccc ccadf cc 输出文本: aaa1234 bbb1234 c1234
我有一个名为 adjust_status 的存储函数和一个包含 status 列的表 users。 select adjust_status(status) as adjusted_status
我有一个表，其中有一列由插入前触发器填充，该列设置为 NOT NULL 并且没有DEFAULT VALUE。 当我执行 INSERT TABLE 而不传递此列时，我收到错误:1364 - Field
这个问题已经有答案了: Modify the value of each textfield based on original value using jQuery (3 个回答) 已关闭去年。 使
我正在阅读 this , 它说 @keyframes rules don't cascade, so animations never derive keyframes from more than
编辑:我解决了问题，请参阅答案中的链接。 我正在使用 XMLHttpRequest AJAX API 将来自不同网站的数据发送到我们在 PythonAnywhere 中的服务器。奇怪的事情发生了:根据
我已经阅读了 Linux 调用 dlopen() 和 dlsym() 的文档，它们分别打开一个动态库并在库中加载一个符号。 这些调用似乎等同于 Windows 的 LoadLibrary() 和 Ge
我是一名优秀的程序员,十分优秀！