Question

My issue on JSBin

我有一个带文字的div容器。

<div id="container">
      Some text with normal content flow...
      <div id="wholescreen">Some 100% text</div>
      Some text again, without #wholescreen above the content.
      #wholescreen must respect the content flow.
 </div>

CSS

#container {
   width: 200px; 
   margin: auto;
}

在里面，我想要一个100％的元素。

#wholescreen {
   position: absolute;
   left: 0;
   width: 100%
}

这很有效。 但它高于文字。所以，我尝试了position: relative：

#wholescreen {
   position: relative;
   left: 0;
   width: 100%
}

现在还没有超过元素，但它也不是100％。

我做什么？我想 this result 。

Answer 1

如果#wholescreen有固定的height，请在其后面的元素中添加margin-top：

#wholescreen + * {
  margin-top: /* value */;
}

这不会影响其他元素。就像我说的那样，只有#wholescreen之后的元素。

» Example on JSBin

如果您可以更改HTML ...

你为什么不尝试这个？

<div class="container">Lorem ipsum dolor sit amet.</div>
<div id="wholescreen">100%</div>
<div class="container">Consectetur adipisicing elit.</div>

不同之处在于元素不会是另一个元素的子元素。：P

» Example on JSBin

Answer 2

根据父窗口定位绝对位置，父级位置相对或绝对。

将其放入容器

#container {
   width: 200px; 
   margin: auto;
   position:relative;
}

添加相对于该父级的位置。

<强>更新

这在Chrome中正常运行。

<style>
#wholescreen {
   position: absolute;
   left: 0;
   width: 100%

}
#container {
   width: 200px; 
   margin: auto;
   position:relative;
}
</style>
<div id="container">
      Some text
      <div id="wholescreen">Some 100% text</div>
 </div>

以200px容器为中心，在同一个200px中心容器中使用“some some text”，“some some 100％text”。那是你想要完成的吗？

在文档中左上角的#wholescreen。

<style>
#wholescreen {
   position: absolute;
   left: 0px;
   top:0px;
   width: 100%

}
#container {
   width: 200px; 
   margin: auto;
}
</style>
<div id="container">
      Some text
      <div id="wholescreen">Some 100% text</div>
 </div>

Answer 3

给出相对于容器父级的位置并给#wholescreen绝对的位置但如果您更改任何#wholescreen父级的css属性位置，则可能会破坏此效果

body{
    position:relative
}
#wholescreen {
   position: absolute;
   left: 0;
   width: 100%;
   top: 50px; // give it a top value
}

如果您希望#wholescreen附加到窗口而不在滚动时移动，请使用

#wholescreen{
    position: fixed;
    left: 0;
    width: 100%;
}

在这里查看小提琴：http://jsfiddle.net/AdVL8/6/

新编辑

我给了它一个更好的外观，我意识到你可能不想让一个元素隐藏文本，所以我认为这是你想要的效果：

body{
    /* remove position: relative; */
}
#wholescreen{
    position: relative;
    text-align: center;
    left: 50%; /* the property that will help us find the center of the screen */
    width: 2000px; /* a width wider than any screen */
    margin-left: -1000px; /* centers the element (must be 50% of the width) */
}

具有位置属性的宽度固定容器中的100％元素？

My issue on JSBin

3 个答案: