车身高度100%显示垂直滚动条
出于好奇，考虑到下面的示例，为什么在#container div上有边距会导致浏览器中出现垂直滚动条？容器的高度比设置为100%的车身高度小得多。
我已经将除了#容器之外的所有元素的填充和边距设置为0。注意，我故意省略了#container div上的绝对定位。在这种情况下，浏览器是如何计算身体的高度的，边距是如何影响它的？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
JSFiddle上的示例
共有2个答案
基于@BoltClock♦的回答，我把边距归零了。
所以
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
将id“st-full-pg”分配给panel div（进一步包含panel-heading和panel-body）的工作
如果您绘制HTML和body的背景（赋予它们各自的颜色），您很快就会注意到body与#container一起下移，而#container本身与body的顶部根本没有偏移。这是边距折叠的一个副作用，我在这里详细介绍了这一点（尽管那个答案描述了一个略有不同的设置）。
正是这种行为导致滚动条出现，因为您已经声明body具有HTML的100%高度。注意，body的实际高度不受影响，因为高度计算中从不包括边距。
-
问题内容： 我的表上有很多行。我想设置表格的高度，例如500px，这样，如果表格的高度大于该高度，则会出现一个垂直滚动条。我尝试在上使用CSS 属性，但是它不起作用。 问题答案： 尝试使用CSS属性。还有单独的属性来定义水平溢出（）和垂直溢出（）的行为。 由于只需要垂直滚动，请尝试以下操作： 编辑： 显然，元素不尊重该属性。这似乎是因为默认情况下元素未呈现为（它们实际上具有自己的显示类型）。您可以
-
问题内容： 所以目前我有： 但是，我认为对于某些用户来说，那里有更多的内容是显而易见的。他们可以在不知道我的div实际包含更多内容的情况下向下滚动页面。我使用510px的高度，因此它会截断一些文本，因此在某些页面上看起来确实有更多内容，但这不适用于所有页面。 我使用的是Mac，在Chrome和Safari中，垂直滚动条仅在鼠标悬停在Div上并且您正在滚动时才会显示。有没有办法一直显示它？ 问题答案
-
问题内容： 如何设置100％的宽度并仅在垂直滚动条中放置一些高度？ 我希望避免增加一些额外的div，我要的是简单的表像这样，当我试图改变显示table-layout，position和CSS表更事情不是100％的宽度仅与PX固定宽度的工作好。 问题答案： 为了使元素可滚动，我们需要更改其在页面上的显示方式，即用于将其显示为块级元素。 由于我们更改了的属性，因此我们也应该更改 element的属性，
-
即使SWT表格为空，是否可以始终在表格中显示垂直滚动条？通过始终显示（可能已禁用）垂直滚动条，可以避免最后一列在使用列权重数据（ColumnWeightData）进行布局时部分隐藏。 我试图用SWT初始化表。V\u滚动或使用表格。getVerticalBar（）。setVisible（true）-两者均未成功。 在ScrollableComposite中有一个方法设置总是显示滚动条。我要找的是表中
-
问题内容： 我想始终在网页中显示垂直滚动条。是否可以使用javascript？我认为可以使用javascript或jQuery。我要垂直滚动条是否有足够的内容来显示或不显示。 谢谢。 问题答案： 不需要jQuery。您可以尝试添加CSS： 这适用于最新的浏览器，甚至IE6。