Question

好吧，我明白DIV的目的是遏制其内在元素 - 我不想通过另外说法来打扰任何人。但是，请考虑以下情况：

我的网页（仅占整个页面宽度的70％）被一个容器（div）包围。但是，在我页面顶部的导航栏下，我想创建一个占用整个页面宽度100％的横幅（这意味着它必须扩展到其容器的边界之外作为容器只占页面宽度的70％。

这是我想要完成的基本想法：http://www.petersonassociates.biz/

有没有人对我如何做到这一点有任何建议？我很感激任何帮助。

埃文

Answer 1

如果您只想让元素的背景延伸到整个页面，这也可以通过负边距来实现。

简而言之（评论更正）：

.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}

这会为您提供水平滚动条，您可以使用以下内容删除：

body {overflow-x: hidden; }

http://www.sitepoint.com/css-extend-full-width-bars/有一个指南。使用伪元素执行此操作可能更具语义性：http://css-tricks.com/full-browser-width-bars/

Answer 2

如果我理解正确，

style="width: 100%; position:absolute;"

应该实现你想要的目标。

Answer 3

执行此操作的语义更正确的方法是将标头放在主容器之外，避免使用position:absolute。

示例：

<html>
  <head>
    <title>A title</title>
    <style type="text/css">
      .main-content {
        width: 70%;
        margin: 0 auto; 
      }
    </style>
  </head>
  <body>
    <header><!-- Some header stuff --></header>
    <section class="main-content"><!-- Content you already have that takes up 70% --></section>
  <body>
</html>

另一种方法（保持在<section class="main-content">）就像你说的那样，不正确，因为div（或section）应该包含元素，而不是让它们超出其父div / section的范围。如果你的孩子div延伸到父div之外，你也会在IE中面临问题（我相信任何7或更低，但这可能只是IE6或更低）。

Answer 4

有几种方法可以做到这一点。

绝对定位
像其他人所建议的那样，如果你想要在页面上提供100％宽度和绝对位置的CSS属性，它将跨越页面的整个宽度。

但是，它也会位于页面顶部，可能会遮挡您的其他内容，这不会为您现在的100％内容腾出空间。绝对定位会从文档流中删除元素，因此它将表现为新定位的内容不存在。除非你准备好准确计算你的新元素应该在哪里并为它腾出空间，否则这可能不是最佳方式。

图片：你也可以使用一组图片来获得你想要的东西，但祝你好运更新它或改变页面任何部分的高度，等等。非常适合可维护性。

嵌套DIV
这就是我建议你这样做的方式。在我们担心任何100％宽度的东西之前，我将首先向您展示如何设置70％居中的外观。

<div class="header">
<div class="center">
  // Header content
</div>
</div>
<div class="mainContent">
<div class="center">
  // Main content
</div>
</div>
<div class="footer">
<div class="center">
  // Footer content
</div>
</div>

使用这样的CSS：

.center {
  width: 70%;
  margin: 0 auto;
}

现在你有出现的作为围绕你的居中内容的容器，而实际上，向下移动页面的每一行内容由一个包含div的内容组成，带有语义和描述性类（比如header，mainContent等），里面有一个“center”类。

使用该设置，使标题看起来“突破容器div”就像这样简单：

.header {
  background-color: navy;
}

颜色到达页面边缘。如果出于某种原因，您希望内容本身延伸到整个页面，您可以这样做：

.header .center {
  width: auto;
}

该样式将覆盖.center样式，并使标题的内容扩展到页面的边缘。

祝你好运！

Answer 5

编辑（2019）： 使用此CSS实用程序可以获得new trick完全出血：

width: 100vw;
margin-left: 50%;
transform: translateX(-50%);

我猜所有解决方案都有点过时了。

逃避元素边界的最简单方法是添加：

    margin-left: calc(~"-50vw + 50%");
    margin-right: calc(~"-50vw + 50%");

讨论可以找到here和here。即将到来的grid-layouts也有一个很好的解决方案。

逃离div容器的边界

5 个答案: