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

Question

我的页面最大宽度为1280像素。使用margin: 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”（我不确定在不同的浏览器中进行计算）？什么是更简单的解决方案？

Answer 1

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

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

Answer 2

您可以通过将calc和媒体查询包装在另一个div中来解决它，它与body水平对齐，并且宽度与body相同，但是固定并粘在屏幕的底部。
在那个div中，你可以将红色的小盒子浮动到右边。

虽然外部div的行为似乎只有body，而max-width: 100%和width设置为body的{​​{1}} + 2（左边和右边界）：

max-width

body
{
    max-width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;
}
.hack
{
    position: fixed;
    bottom: 0;
    max-width: 100%;
    width: 502px;
    margin: 0 auto;
    padding: 0;
}
.box
{
    height: 30px;
    width: 30px;
    margin: 0;
    padding: 0;
    background-color: red;
    float: right;
}

Updated fiddle

在Chrome 44和IE 8中测试并使用。

Answer 3

你也可以只使用一个元素和一些CSS。

例如，您的HTML可能是：

<div class="content">
  Your content here

    <div class="fixed-wrapper">
        <div class="fixed">HEY</div>
    </div>
</div>

然后，CSS：

.content {
    max-width: 500px;
    margin:0 auto;
    position:relative;
}

.fixed-wrapper {
    position:absolute;
    bottom:0;
    right:0;
    width:30px;
    height:30px;
}

.fixed-wrapper .fixed {
    position:fixed;
    width:30px;
    height:30px;
    bottom:0;
    background:red;

}

通过将position:relative添加到.content并使用包装到固定元素，您可以将其放置在您想要的位置。作为一个没有指定位置的元素渲染其父元素，你可以省略固定元素的right属性，让包装器为你定位。

例如，请参阅此FIDDLE。

Answer 4

删除media-query也可以，  删除并再次看到输出

Output

Answer 5

在简单的css中尝试这个 -

.main{
    width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;  
}
.footer {
    position:fixed;
    bottom: 0;
    height: 30px;
    width: 30px;
    left:510px;
    background-color: red;

}

这是小提琴 - https://jsfiddle.net/maL5nvbu/