英文:
How to fix invisible margin parameter?
问题
以下是您要翻译的内容：
首先，我真的不懂CSS！我遇到了一些奇怪的问题...但首先让我向您展示我的应用程序。
这是屏幕：（左侧边栏展开）
[![在此输入图像描述][1]][1]
（左侧边栏隐藏）
[![在此输入图像描述][2]][2]
请注意周围带有网格的画布上的滚动条。这个滚动条看起来是这样的，因为它有margin-top和margin-left = 20。看看这个：
[![在此输入图像描述][3]][3]
如果我在那个地方删除这个margin，看看它会变成什么样：
[![在此输入图像描述][4]][4]
[1]: https://i.stack.imgur.com/PVThO.png
[2]: https://i.stack.imgur.com/k3mOI.png
[3]: https://i.stack.imgur.com/ghozO.png
[4]: https://i.stack.imgur.com/JEyma.png
正如您所看到的，一切看起来都很好。我需要在左边用调试器向您展示这个，因为如果我关闭它，这个margin就会立刻回来。我需要在右边用调试器向您展示这个，因为如果我关闭它，这个margin就会立刻回来。这是我“网格”部分的代码：
<div id="justdraw" style="position: static; width: 1600px; height: 600px;">
<!-- Diagram组件绑定到下面的canvas元素 -->
<div id="ruler" style="position: static; width: 100%; height: 100%;">
<div id="canvas" style="position: absolute; width: 1600px; height: 600px; margin-top: 0; margin-left: 0; overflow: scroll;">
<canvas id="diagram" width="2100" height="2100">
此页面需要支持HTML 5 Canvas元素的浏览器。
</canvas>
</div>
</div>
</div>
我正在使用Thymeleaf片段，该代码是片段，并且在这里使用：
<!-- 页面内容 -->
<div id="content" style="position: relative;">
<th:block th:include="diagramER :: diagram"/>
</div>
有人可以告诉我这是什么原因吗？为什么浏览器中的样式显示与我在代码中看到的不同？
浏览器中的样式：
element.style {
position: absolute;
width: 1600px;
height: 600px;
overflow: scroll;
margin-top: 20px;
margin-left: 20px;
}
我的代码中的样式：
<div id="canvas" style="position: absolute; width: 1600px; height: 600px; margin-top: 0; margin-left: 0; overflow: scroll">
英文:
for first i am really bad with css! I have strange problems... but firstly let me show you my app
Here is screen: (left sidebar expanded)
(left sidebar hidden)
Please take a look on scrollbar around that canvas covered with grid. This scrollbar look like that because it have margin-top and margin-left = 20. Look at this:
If i will delete this margin in that place, look how it will be look like:
As you can see everything look good. I needed to show you that with debbuger on my left side because if i close him then immediatly this margin come back. I needed to show that with debugger on my right side because if i close him then immediately this margin come back. Here is my code of that "grid" part:
<div id="justdraw" style="position: static; width: 1600px; height: 600px;">
<!-- The Diagram component is bound to the canvas element below -->
<div id="ruler" style="position: static; width: 100%; height: 100%;">
<div id="canvas" style="position: absolute; width: 1600px; height: 600px; margin-top: 0; margin-left: 0; overflow: scroll">
<canvas id="diagram" width="2100" height="2100">
This page requires a browser that supports HTML 5 Canvas element.
</canvas>
</div>
</div>
</div>
I am using fragments Thymeleaf, that code is fragment and it is used here:
<!-- Page Content -->
<div id="content" style="position: relative;">
<th:block th:include="diagramER :: diagram"/>
</div>
Can anyone tell me what could be the reason for this? How is it possible that the styles in the browser show something different than what I have in the code?
Styles from browser:
element.style {
position: absolute;
width: 1600px;
height: 600px;
overflow: scroll;
margin-top: 20px;
margin-left: 20px;
}
Styles from my code:
<div id="canvas" style="position: absolute; width: 1600px; height: 600px; margin-top: 0; margin-left: 0; overflow: scroll">
答案1
得分: 1
这是不同于其他操作系统的地方，所以你应该自定义你的滚动条。
制作了一个快速示例：
::-webkit-scrollbar-track {
display: none;
}
https://jsfiddle.net/p4mc70go/1/
英文:
It's different on other OS'.. so you should style your scrollbar
Made a quick sample:
::-webkit-scrollbar-track {
display: none;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论