解决响应式设计中的CSS填充问题

问题描述

|| 这种简单的HTML5布局旨在在左侧具有一个导航栏，并在其旁边浮动正文（使用百分比而不是像素进行流畅的响应式设计-计算在CSS内的注释中）。 http://www.wturrell.co.uk/stackoverflow/20110615-01.html \'page \'div中元素的宽度精确地相加为100％。我想向某些元素（在本例中为导航）添加填充。如果我删除所有填充，它们将正确浮动，但是填充超过1或2像素（无论指定了什么单位），它就会中断。我不明白为什么这会破坏布局，因为它不能填充块，因此肯定不应该改变块的整体大小吗？我错过了什么？更新-解决方案： http://www.wturrell.co.uk/stackoverflow/20110615-02.html （元素显示宽度=宽度加上边框加上填充。导航应该是名义上总共200像素，右侧有20px填充，因此对于流体设计，宽度= 180/900 * 100或20％，填充= 20/900 * 100或2.222 ％，正文仍为700/900 * 100或77.777％。）

解决方法

在CSS盒子模型中，将ѭ0添加到ѭ1中以获取盒子的整体大小。在您的情况下，如果宽度百分比总计为100％，则即使1px也意味着内容溢出。尝试以百分比设置填充，并在将它们相加时考虑在内，或者在边缘保留1％或2％的缓冲区，并以像素为单位添加小的填充。 , 首先，您需要添加一个文档类型来触发标准模式。否则，您的页面将使用“怪癖模式”，这将在Internet Explorer中特别引起严重的问题。添加为您的第一行：

<!DOCTYPE html>

接下来，关于盒子模型，@ Alex Ciminian的答案是正确的（padding不被视为width的一部分）。您可以将ѭ1减少恰好等于ѭ0的量，或者：使用box-sizing: border-box：https：//developer.mozilla.org/en/CSS/box-sizing 您可以将其添加到想要将ѭ0包含在width的计算中的所有元素中：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

有关此的更多详细信息，请参见：http://css-tricks.com/box-sizing/ 浏览器对此属性的支持很好：http://caniuse.com/css3-boxsizing-除了IE6 / 7之外的任何地方。 , @williant;亚历克斯（Alex）是正确的ѭ11right，向元素添加width。因此，根据padding调整adjust1ѭ。 CSS：

#page nav {
    clear: both;
    display: inline;
    float: left;
    padding: 0 10% 0 0;
    width: 12.2222%;
}

, 您可以尝试使用box-sizing: border-box;或设置max-width:100%和/或max-height:100%;。如果要尝试保持兼容性，则max-width和max-height css选项与IE的较早版本兼容。编辑：使用以下代码在各种浏览器中使用大小调整框：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

响应响应填充填充解决解决解决设计设计设计问题问题

解决响应式设计中的CSS填充问题

问题描述

解决方法

相关问答