1

这是一个困扰我一年的问题。根本问题是如何设置元素相对于其父元素的大小，以便它从每个边缘插入 N 个像素？设置宽度会很好，但您不知道父级的宽度，并且您希望元素随窗口调整大小。（您不想使用百分比，因为您需要特定数量的像素。）

编辑我还需要防止内容（或缺少内容）拉伸或收缩两个元素。我得到的第一个答案是在父级上使用填充，这会很好用。我希望父级的宽度正好为 25%，并且与浏览器客户区的高度完全相同，而子级不能推动它并获得滚动条。/编辑

我尝试使用 {top:Npx;left:Npx;bottom:Npx;right:Npx;} 解决这个问题，但它只适用于某些浏览器。

我可能会用 jquery 编写一些 javascript 来修复每个页面调整大小的所有元素，但我对那个解决方案并不满意。（如果我想要顶部偏移 10px 但底部只有 5px 怎么办？它变得复杂了。）

我想知道的是如何以跨浏览器的方式解决这个问题，或者是一些允许简单 CSS 解决方案的浏览器列表。也许有人有一个技巧可以让这件事变得简单。

4

5 回答 5

1

如果您只关心水平间距，那么您可以通过给父元素填充来使父块元素中的所有子块元素“插入”一定量。您可以通过给元素边距在父块元素“插入”中制作单个子块元素。如果您使用后一种方法，您可能需要在父元素上设置边框或轻微填充，以防止边距折叠。

如果您也关心垂直间距，那么您需要使用定位。父元素需要定位；如果您不想将其移动到任何地方，请使用position: relative并且不要打扰设置top或left；它会留在原地。然后在子元素上使用绝对定位，并设置top、right、bottom和left相对于父元素的边缘。

例如：

#outer {
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
}

#inner {
    background: white;
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
}

如果要避免内容扩展元素的宽度，则应使用overflow属性，例如overflow: auto.

于 2008-09-24T16:50:26.083 回答
1

CSS Box 模型可能会为您提供洞察力，但我的猜测是您无法仅使用 CSS 实现像素完美的布局。

如果我理解正确，您希望父级宽度为 25%，并且与浏览器显示区域的高度完全相同。然后，您希望孩子的宽度为 25% - 2n 像素，高度为 100%-2n 像素，周围有 n 个像素。当前的 CSS 规范不支持这些类型的计算（尽管 IE5、IE6 和 IE7 对 CSS 表达式有非标准支持，并且IE8 正在放弃对 IE8 标准模式下的 CSS 表达式的支持）。

您可以强制父母浏览器区域的 100% 和 25% 的宽度，但你不能将孩子的高度拉伸到像素完美...

<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 可以在满足高度要求的情况下实现像素完美。

于 2008-09-25T23:17:38.687 回答
0

只需对父元素应用一些填充，而在子元素上没有宽度。假设他们都是display:block，那应该可以正常工作。

于 2008-09-24T16:38:19.937 回答
0

或者反过来：设置margin子元素的。

Floatutorial是此类内容的绝佳资源。

于 2008-09-24T16:45:31.697 回答
0

试试这个：

.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}

它应该在所有边都有一个 Npx 空间，拉伸以填充父元素。

编辑：当然，在父母身上，你也可以使用

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
于 2008-09-24T16:48:07.853 回答