用填充“突破”DIV？答案

【问题标题】："Break out" of DIV with padding?用填充“突破”DIV？
【发布时间】：2009-12-15 02:11:57
【问题描述】：

如果我有一个 100% 宽的 div 元素，左右各有 12 个像素 padding，并且我在 div 内有一个元素，我想从屏幕的一个角跨越到另一个角（桥接12 像素间隙），我是否有机会在不使用绝对定位的情况下“突破”周围的 div？

使用position:relative; left:-12px 不能单独工作，因为 div 是 100% 宽，我不能指定“100% + 12px”来使内部元素接触到右上角。

【问题讨论】：

【解决方案1】：

纯 CSS 解决方案：

#breakout { margin-left: -12px; width: 100%; padding-left: 12px; padding-right: 12px; }

在 FF 3.5 和 IE8 中测试。其他浏览器未测试。使用 IE7 或更早版本可能会很奇怪。

我认为这行得通的原因是浏览器添加了标签宽度和它的空白（填充）。在这种情况下，margin-left: -12px 将 div 移动到视觉上看起来它忽略了父级的padding: 12px。起初我以为单独width: 100%; padding-right: 12px; 会起作用，但事实并非如此。我意识到这是因为使用了盒子模型。它没有考虑初始填充，因为它正在与父级的填充折叠（或者我假设如此）。

这里是我的测试页面供参考：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Hello</title>
    <style type="text/css">
        html, body { padding: 0; margin: 0; color: white; }
        #outer { padding: 12px; background-color: blue; }
        #breakout { background-color: red; margin-left: -12px; width: 100%; padding-right: 12px; padding-left: 12px; }
    </style>
</head>
<body>
    <div id="outer">
        <h3>Some content</h3>
        <div id="breakout">Breakout</div>
        <h3>More content</h3>
    </div>

</body>
</html>

【讨论】：

哇，这看起来很棒。今天将尝试一段时间并提供反馈。我希望 IE7 能发挥作用，因为在这种情况下我确实需要它...
干杯 T.Stone，我在最初的问题中没有提到的是，在 DIV 内部，我有一个所见即所得的编辑器，需要拉伸 DIV 的整个宽度，所以填充不是一个选项。我玩了一些负边距和填充，但我从来没有设法在右侧拉伸 DIV，以便编辑器可以拉伸。我将不得不删除填充，在那里找到解决方法并给 div 100％“自然”宽度。还是谢谢！

【解决方案2】：

一个老问题，但是对于那些在谷歌上搜索的人，您现在可以使用vw（设备屏幕宽度）和position:relative 来实现：

.wrapper_div{
margin: 0 auto;
width: 50%;
padding: 20px;
}

.breakout_div{
position: relative;
width: 100%; /*Fallback for older browsers*/
width: 100vw; /*Percentage of full screen viewing width*/
left: calc(-50vw + 50%); /*Centres div*/
}

【讨论】：