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

Question

我的页面最大宽度为 1280 像素。正文使用 margin: 0 auto; 在大屏幕上居中现在我想在右下角放置一个元素。这必须修复，因为它应该随内容滚动。在大于 1280 像素的屏幕上，该元素应位于居中主体的一角，而不是粘在 window.

的右侧

元素应该固定在那里，与当前视口宽度无关。

我已经通过结合使用媒体查询和 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 显示了我想要的。我只是问这是否有可能通过更多 "standard-CSS" 来实现（我不太确定跨不同浏览器的计算）？有什么更简单的解决方案？

Answer 1

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

Output

Answer 2

尝试简单的 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;

}

这里是 fiddle - https://jsfiddle.net/maL5nvbu/

Answer 3

您可以通过将 calc 和媒体查询包装在另一个 div 中来摆脱它们，它像 body 一样水平对齐，并且与 [=] 具有相同的宽度13=]，但固定并粘在屏幕底部。
在那个 div 里面，你可以将红色的小方框向右浮动。

尽管外部 div 的行为似乎只像 body，max-width: 100% 和 width 设置为 body 的 max-width + 2（左右边框）：

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;
}

<body>
    This is the centered body
    <div class="hack">
        <div class="box">E</div>
    </div>
</body>

Updated fiddle.

在 Chrome 44 和 IE 8 中测试和工作。

Answer 4

你也可以只用一个元素和一点 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 5

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

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

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

Position fixed element in bottom right corner of page with CSS3

html

css

css-position

例如，请参阅此 `FIDDLE`。

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

Position fixed element in bottom right corner of page with CSS3

html

css

css-position

例如，请参阅此 FIDDLE。

例如，请参阅此 `FIDDLE`。