我的页面最大宽度为1280像素.身体以较大的屏幕为中心,使用保证金:0 auto;现在我想在右下角放置一个元素.必须修复它,因为它应该滚动内容.在大于1280像素的屏幕上,元素应保留在居中主体的角落,而不是粘在窗口的右侧.
元素应该粘在那里,与当前视口宽度无关.
我已经通过使用媒体查询和CSS3-calc操作的组合解决了这个问题.对于这个简单的任务来说,这感觉就像是一种矫枉过正,但我找不到比我更简单的解决方案.这是一些示例css(我已经将最大页面宽度更改为500px):
body {
max-width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
div {
position: fixed;
right: 0;
bottom: 0;
height: 30px;
width: 30px;
margin: 0;
padding: 0;
background-color: red;
}
@media all and (min-width: 515px) /*max body width + (element width / 2)*/ {
div {
margin-right: -webkit-calc((100% - 500px) / 2);
margin-right: -moz-calc((100% - 500px) / 2);
margin-right: calc((100% - 500px) / 2);
}
}
我的JSFiddle正好显示了我想要的东西.我只是问这是否有可能实现更多的“标准CSS”(我不确定在不同的浏览器中进行计算)?什么可以是一个更简单的解决方案?
@H_404_12@
@media all and (min-width: 515px) {
div {
right: 50%;
margin-right: -250px;
}
404_12@
@H_404_12@
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!