这是一个困扰我一年的问题。根本问题是如何设置元素相对于其父元素的大小，以便它从每条边插入 N 个像素？设置宽度会很好，但您不知道父级的宽度，并且您希望元素随窗口调整大小。 (您不想使用百分比，因为您需要特定数量的像素。)
编辑 我还需要防止内容(或缺少内容)拉伸(stretch)或收缩这两个元素。我得到的第一个答案是在父级上使用填充，这会很好用。我希望父级恰好是 25% 宽，并且与浏览器客户区的高度完全相同，而子级不能插入它并获得滚动条。 /编辑
我尝试使用 {top:Npx;left:Npx;bottom:Npx;right:Npx;} 解决这个问题，但它只适用于某些浏览器。
我可能会用 jquery 编写一些 javascript 以在每次调整页面大小时修复所有元素，但我对该解决方案并不满意。 (如果我想让顶部偏移 10px 但底部只偏移 5px 怎么办？这会变得很复杂。)
我想知道的是如何以跨浏览器的方式解决这个问题，或者一些允许简单 CSS 解决方案的浏览器列表。也许有人有办法让这一切变得简单。
最佳答案
The CSS Box model可能会为您提供见解，但我的猜测是您无法仅使用 CSS 实现像素完美的布局。
如果我没理解错的话，您希望父级的宽度为浏览器显示区域的 25%，高度恰好为浏览器显示区域的高度。然后，您希望 child 的宽度为 25% - 2n 像素，高度为 100%-2n 像素， child 周围有 n 像素。当前的 CSS 规范不支持这些类型的计算(尽管 IE5、IE6 和 IE7 在 IE8 标准模式下对 CSS 表达式有非标准的 support for CSS expressions 和 IE8 is dropping support)。
您可以强制父级为 100% 的浏览器区域和 25% 的宽度，但是您不能将子级的高度拉伸(stretch)到像素完美...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...但是会出现水平滚动条。此外，如果内容被挤压，父背景不会超过 100%。这可能是您在问题本身中提供的填充示例。
您可以通过图像和额外的 div 实现您正在寻找的错觉，但我不相信仅靠 CSS 可以实现像素完美并满足该高度要求。
关于css - 求 CSS 浏览器兼容性信息，使用 left 和 right 设置宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/128241/