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

Question

我的页面最大宽度为1280像素.使用margin: 0 auto;Now我想在右下角放置一个元素,正文在大屏幕上居中.必须修复它,因为它应该滚动内容.在大于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"(我不确定在不同的浏览器中进行计算)？什么可以是一个更简单的解决方案？

Answer 1

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

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