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

StackOverflow https://stackoverflow.com/questions/128241

题

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

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

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

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

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

有帮助吗？

解决方案

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

其他提示

如果您只关心水平间距，那么您可以在父块元素“inset”中创建所有子块元素。通过给出父元素填充一定量。您可以在父块元素“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 。

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

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

Floatutorial 对于这样的人来说是一个很好的资源。

试试这个：

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

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

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

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top