CSS 百分比大小说明符将元素大小调整为大于指定大小答案

【问题标题】：CSS Percent size specifier sizing element to more than specified sizeCSS 百分比大小说明符将元素大小调整为大于指定大小
【发布时间】：2013-02-01 18:52:19
【问题描述】：

在 CSS 中，我从来没有真正理解为什么会发生这种情况，但是每当我分配一个 margin-top:50% 时，该元素就会被推到页面底部，几乎完全离开页面。我假设 50% 时，该元素将位于页面的中间。

设置元素的宽度和高度属性也会发生这种情况。如果我将 div 的宽度设置为 100%，则 div 的右侧会离开可视屏幕，我必须滚动才能看到它。

为什么会发生这种情况，有办法解决吗？

编辑：

这是我的 CSS 代码。我也在使用引导程序，但这是我在引导程序之外注意到的一个问题。

html{
height:100%;
min-height: 100%;
min-width: 100%;
}
#button_container{
width:100%;
clear:both;
margin:0 auto;
margin-top: 25%;
}

#donate_section, #contrib_section{
display:inline;
}
#contrib_section{
float:right;
}

样板 HTML 标记：

<body>
    <div id="someid"> 
         <div>
             <a></a>
         </div>
         <div>
             <a></a>
         </div>
     </div>
</body>

【问题讨论】：

为避免胡乱猜测，您的代码的任何示例都将有助于找到答案。可以通过填充、位置、表格...
是的，我刚刚添加了我的 css 代码。

标签： css web

【解决方案1】：

阅读此内容，然后再阅读一遍：http://www.w3schools.com/css/css_boxmodel.asp

您的“宽度”设置仅设置内容部分 - 所以您的总宽度是内容+边距+填充+边框。因此，如果宽度 = 50%，那么在这一切之后，你真的有更多的 55% 左右（具有正常的、较小的边距/填充/边框）。如果您希望您的 div 在外部仅占 50%，则需要有一个在其外部 50% 的无填充/边距/边框 div，或任何数量的其他解决方案。

您也可能正在处理浏览器渲染并不完美的事实。如果您想避免滚动，通常不应使用 100% 的宽度。（这也是很好的“Web 2.0”设计，如果您遵循那所学校 - 从可用性/可读性的角度来看，您应该在两边都有空白）。

编辑：另外，您的百分比是相对于 width，而不是高度。例如，请参阅CSS fluid layout: margin-top based on percentage grows when container width increases。

【讨论】：

好吧，这很公平，只要不使用 100% 即可。但我觉得，当我说 50% 时，应该是 90%。那部分不太有意义。
对不起，我的意思是不应该是 90%。我将位置设置为固定，这似乎已经解决了。当我这样做时， div 在页面的中间位置。如果不固定位置，则 div 会离开页面底部。仍然不知道为什么。
我的编辑可能是为什么... % 是相对于宽度，而不是高度，即使对于像顶部/底部这样的“高”事物也是如此。

【解决方案2】：

引用通常与父元素“相对”。除非你说的是body标签的第一个孩子。

【讨论】：

是的，body 标签的第一个孩子。只是一个包含两个 div 的 div，每个 div 内部都有一个链接。