相关疑难解决方法(0)
推荐指数
解决办法
查看次数
CSS表达式
我在某处读过CSS表达式已弃用,甚至不应该使用.我从未听说过他们,于是决定去看看.我发现了一个代码示例,即使您滚动,也会在屏幕上的同一位置保留浮动元素.
<html>
<style>
#fixed {
position:absolute;
left:10px;
top:expression(body.scrollTop + 50 + "px");
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>
这让我想起了网页底部有"共享栏"和内容的网站.
所以...
- 这是他们这样做的吗？
- 在这种情况下使用表达式是否可以？
- 如果没有,我应该使用什么？
- 表达式可以帮助解决其他任何有趣/有用的事情吗？
推荐指数
解决办法
查看次数
CSS网格呈现在Firefox和Safari中父级滚动条的后面
我有一个绝对定位的面板（固定高度，overflow scroll）和一个带有正方形瓷砖的网格（10列）。在Chrome中，网格可以正确呈现：
但是在FF / Safari中，最后一列显示在包装器的滚动条后面，这很奇怪：
我想要的是所有浏览器（例如Chrome）中的相同行为。我怎么得到这个？
:root {
--ck-character-grid-tile-size: 24px;
}
body * {
box-sizing: border-box;
}
.wrapper {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
background: red;
position: absolute;
top: 50px;
left: 50px;
outline: 1px solid black;
}
.grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
background: blue;
}
button {
background: yellow;
width: var(--ck-character-grid-tile-size);
height: var(--ck-character-grid-tile-size);
min-width: var(--ck-character-grid-tile-size);
min-height: var(--ck-character-grid-tile-size);
border: 0;
padding: 0;
overflow: hidden;
outline: 1px solid black;
}<div class="wrapper">
<div class="grid">
<button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button>
</div> …推荐指数
解决办法
查看次数
滚动条不占空间
我正在用html制作一个应用程序,我需要一个滚动条.但每当我添加一个时,它会将所有内容都移动到滚动条所需的空间.这搞砸了应用程序的布局.所以我需要一种方法让滚动条简单地叠加在页面顶部,这意味着页面仍然在它后面.我已经知道如何设置滚动条的样式以使背面透明,我只需要滚动条不占用任何空间.
提前致谢!
推荐指数
解决办法
查看次数
如何忽略 CSS 中的滚动条宽度？
解释
我想将三个盒子水平排成一行，但最后一个掉了下来。
当我删除滚动条时，它排列得很好。
所以，问题是由滚动条宽度引起的。
如何忽略css中的滚动条宽度？
我是否需要编写 JavaScript 代码来计算滚动条宽度并调整包装 dom 元素的宽度？
演示和代码
我在 codePen.io 中发布了 html 和 css 代码。
http://codepen.io/anon/pen/kXAPap
HTML
<div id="main">
<ul id="window-list">
<li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li><!--
--><li class="window">
<div class="window-thumbnail">
</div>
</li>
</ul>
</div>
CSS
body {
border-top: solid 1px #a3a1a3;
margin: 0;
padding: 20px;
background-color: #e7e7e7;
}
ul, li, p {
margin: 0;
padding: 0;
}
/* …推荐指数
解决办法
查看次数
当垂直滚动条出现时,如何阻止我的Web内容向左移动？2017年的建议汇总
许多程序员已经询问如何停止他们的网页内容 - 特别是他们的中心网页内容(margin: 0 auto;) - 在垂直滚动条出现时水平移动(被推).这对于Ajax用户和像我这样使用隐藏div和标签来组织数据的人来说一直是个问题.
当当前显示的页面改变使得所显示的材料的高度(内窗口高度)突然大于物理窗口高度时,会出现问题.
所有滚动条都不相同的现实加剧了这个问题.不同的浏览器为它们的滚动条赋予不同的宽度,并且不能(或者,至少,不应该)预测该差异.简而言之,理想的解决方案是滚动条宽度无关.
因此,这是一个自我回答的问题,在2017年8月5日之前将所有这些答案与其有用性(在可能的情况下)的评论以及我自己的解决方案汇总到一个答案.我已将其标记为重复我可以找到以前的问题,以便人们可以找到有关该问题的全面讨论.
请注意,这个答案解决了BODY内容转移的问题.如果您的DIV具有固定高度且存在移位问题,则应将DIV宽度设置为固定(px)宽度,以使其滚动条浮动在文本上方并添加一些右侧填充以防止文本落在其下方.贡献者:Hashbrown,
Avrahamcool,
Edward Newsome
推荐指数
解决办法
查看次数