Question

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

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

我尝试使用{top：Npx; left：Npx; bottom：Npx; right：Npx;}来解决此问题，但它仅适用于某些浏览器。

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

我想知道的是如何以跨浏览器的方式解决这个问题，或者是一些允许简单的CSS解决方案的浏览器列表。也许有人在那里有一个让这很容易的技巧。

Answer 1

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

如果您也关注垂直间距，则需要使用定位。父元素需要定位;如果您不想将其移动到任何地方，请使用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。

Answer 2

The CSS Box model可能会为您提供见解，但我的猜测是您不会仅使用CSS来实现像素完美的布局。

如果我理解正确，您希望父级宽25％并且恰好是浏览器显示区域的高度。然后你希望孩子的宽度为25％ - 2n像素，高度为100％-2n像素，孩子周围有n个像素。目前没有CSS规范支持这些类型的计算（尽管IE5，IE6和IE7在IE8标准模式下对CSS表达式有非标准support for CSS expressions和IE8 is dropping support）。

您可以强制父级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，可以达到像素完美的高度要求。

Answer 3

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

Answer 4

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

对于像这样的东西，

Floatutorial是一个很好的资源。

Answer 5

试试这个：

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

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

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

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}

寻求CSS浏览器兼容性信息，使用左右设置宽度

5 个答案: