Question

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

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

为什么会发生这种情况并且有办法解决它？

编辑：

这是我的css代码。我也在使用bootstrap，但这是我在bootstrap之外注意到的一个问题。

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>

Answer 1

阅读本文，然后再次阅读：http://www.w3schools.com/css/css_boxmodel.asp

你的宽度＆＃39;设置仅设置内容部分 - 因此您的总宽度为内容+边距+填充+边框。因此，如果width = 50％，那么你真的有更多55％左右（正常，小边距/填充/边框）。如果你希望你的div外部只占50％，你需要有一个不在其中的50％的无填充/边距/边界div，或任何其他解决方案。

您也可能正在处理浏览器渲染并不完美的事实。如果你想避免滚动，你通常不应该使用100％的宽度。（这也很好＆＃34; Web 2.0＆＃34;设计，如果你关注那所学校 - 你应该从可用性/可读性的角度来看双方都有空白区域。）

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

Answer 2

引用通常与父元素“相对”。除非你在谈论身体标签的第一个孩子。

CSS百分比大小说明符大小调整元素超过指定大小

2 个答案: