在移动设备上当前视口的中心显示div
三极汉
如何在当前视口的中心显示div？我特别要求移动设备，因为它们是最有问题的。
例如，我有2个按钮显示相同的div。页面顶部是一个，底部是一个。页面的高度总计为2个视口高度。如果显示的div的padding-top为40px，则当按下底部按钮时该div将不可见。显然，该解决方案对于移动设备而言不够灵活。您推荐什么解决方案？
图：如果我将padding-top设置为40px，则绿色div将出现在页面顶部（如图所示）。如果按下底部的红色按钮，则绿色div也将出现在顶部（距其40px）。用户甚至看不到它。它应该出现在第二个视口（用户看到的屏幕）顶部的40px处。希望对您有所帮助。
苦瓜
使用position: fixed。
function toggleDiv() {
var div = document.getElementById('togglable');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};#container-parent {
position: absolute;
background-color: #eee;
height: 95%;
width: 90%;
overflow: scroll;
}
#container {
height: 500px;
}
#togglable {
position: fixed;
top: 10%;
height: 80%;
left: 25%;
width: 50%;
background-color: red;
}
#spacer {
height: 90%;
}<div id="container-parent">
<div id="container">
<input type=button onclick="toggleDiv()">
<div id="togglable"></div>
<div id="spacer">
<!-- I don't know how you have got your buttons attached but the point is that `position: fixed` positions the togglable div relative to the viewport -->
</div>
<input type=button onclick="toggleDiv()">
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
元视口-如何在PC和移动设备上以相同方式显示div的背景？
- 2
使固定宽度适合移动设备视口
- 3
无响应的网站-视口问题-移动设备上显示的页面放大了
- 4
如何根据当前视口位置在特定div中居中显示图像？
- 5
移动Safari-视口设备高度无法正常工作
- 6
禁用移动设备上的缩放以固定视口大小
- 7
网站在移动设备上呈现视口
- 8
移动Safari-视口设备高度无法正常工作
- 9
移动设备上的视口元标记问题
- 10
页面超出了移动设备上的视口
- 11
在移动设备上滚动时，视口高度使闪烁闪烁
- 12
为什么在网页底部显示的带有“ position：fixed”的导航栏不是在移动设备上的视口底部？
- 13
高度未知的中心 div 高于视口高度
- 14
删除div时如何保留当前视口？
- 15
如何在视口中心显示div？
- 16
Div 比视口更宽
- 17
在宽度较小的其他设备上正确使用移动视口
- 18
为什么视口不能为移动设备缩放此图像？它没有响应
- 19
在移动设备上滚动时的不良行为（根据视口大小添加/删除类）
- 20
视口居中 <div> 对齐
- 21
位于div底部的中心图像，上面有视口高度
- 22
为什么我的视口标签在大多数移动设备上不能正确使用设备宽度（无缩放）？
- 23
辅助功能：在移动设备上移动时，制表符位于视口底部的导航叠加之后
- 24
在具有特定视口（例如低于320像素）的设备上显示完整（桌面视图）网站？
- 25
基于设备的不同<meta>视口缩放？
- 26
在触摸设备上平移视口
- 27
如何获得设备的宽度（不是视口）？
- 28
循环所有当前视口
- 29
如何实现FabricJS画布视口的移动？
我来说两句