- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
目标:我正在尝试制作一个全屏 div,它将动态调整自身以适应所有屏幕高度(例如:http://full-vert.webflow.com/)。
问题:当它绑定(bind)到底部并且正在调整屏幕高度时,我正在与子 div 越过它的父 div 的顶部进行斗争。有没有办法让这个子 div 停止随页面高度缩放?
HTML
<div class="container">
<div class="bottom">
<h1>Hi!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
CSS
.container {
background-color: #f9f9f9;
width: 100%;
height:150px;
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
这是一个 jsfiddle:http://jsfiddle.net/Lboyrqnc/
在 .container { height: 200px;} 上尝试不同的值。例如。 50px 到 150px,你会明白我的意思。
附言。我正在使用 height: 100vh 。
编辑:要真正展示我的意思,试试这个:将 .container 高度设置为 100vh(这是当前浏览器窗口高度的 100%)然后使浏览器窗口模式并上下拖动窗口底部,您将看到 h1 将如何越过(在这种情况下)它是父 div。
最佳答案
如果添加会怎么样
top: 0;
到 .bottom 类?
关于HTML/CSS : Inner, 当屏幕高度变小时底部边界 div 越过顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25209525/
在 Facebook 上,他们似乎有一个阻止您加载他们网站的 iframe 的 block 。 当您这样做时,他们会锁定其网站的全部功能 example . 我只是想知道是否有人知道如何绕过它? 最佳
我只想在已经具有顶部和底部边框(1px 纯灰色)的 div 上添加一个左边框(5px 纯蓝色)。我希望 border-left 位于 border-top 和 border-bottom 之上,但浏览
我看到了这个效果here .滚动页面时,页面的主要内容部分会移动到 div 之上。 我尝试使用视差效果重新创建此效果,但徒劳无功。问题是使用视差,我只能更改同一 div 中的 2 个对象的速度。除此之
我正在为 iOS7 优化网站。我发现,在 safari mobile 上将方向更改为横向时,网站会全屏显示,但浏览器会阻止 View 顶部和底部的一些高度和宽度像素。该区域中的任何触摸或点击事件都不会
我有一个使用 devise 进行身份验证的应用程序。 ruby 1.9.2 上的 Rails 3,passenger 位于 nginx 之上。 这是我的问题:我注意到有时我的 session 会交叉。
我是一名优秀的程序员,十分优秀!