作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我的页面的最大宽度为 1280 像素。正文使用 margin: 0 auto;
在大屏幕上居中 现在我想在右下角放置一个元素。这必须修复,因为它应该随内容滚动。在大于 1280 像素的屏幕上,元素应位于居中主体的一 Angular ,而不是粘在窗口的右侧。
元素应该固定在那里,与当前视口(viewport)宽度无关。
我已经通过结合使用媒体查询和 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在页面右下角定位固定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31802253/
我是一名优秀的程序员,十分优秀!