html – 使用CSS3将固定元素定位在页面的右下角

概述我的页面最大宽度为1280像素.身体以较大的屏幕为中心,使用保证金：0 auto;现在我想在右下角放置一个元素.必须修复它,因为它应该滚动内容.在大于1280像素的屏幕上,元素应保留在居中主体的角落,而不是粘在窗口的右侧. 元素应该粘在那里,与当前视口宽度无关. 我已经通过使用媒体查询和CSS3-calc *** 作的组合解决了这个问题.对于这个简单的任务来说,这感觉就像是一种矫枉过正,但我​​找不到比我 我的页面最大宽度为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：https://jsfiddle.net/nh95dc8u/

我的Jsfiddle正好显示了我想要的东西.我只是问这是否有可能实现更多的“标准CSS”(我不确定在不同的浏览器中进行计算)？什么可以是一个更简单的解决方案？

解决方法

@media all and (min-wIDth: 515px) {    div {            right: 50%;        margin-right: -250px;  }

将固定div移动到窗口宽度的50％,然后移动到容器宽度的50％
https://jsfiddle.net/nh95dc8u/5/

总结

以上是内存溢出为你收集整理的html – 使用CSS3将固定元素定位在页面的右下角全部内容，希望文章能够帮你解决html – 使用CSS3将固定元素定位在页面的右下角所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。