Question

此问题建立在that one的基础上，为了将全屏宽度应用于非全宽父元素的子元素，在子元素上使用以下规则：

<div class="outer-space">
  <div class="wrapper">
    Random text for wrapper-div
    <div class="box-wrapper">
      <div class="box">
        <span>Crazy full width window</span>
        <span>absolute positioned pseudo elements</span>
        <span>with centered content div and centered text thingy</span>
        <span>all inside of a fixed width page wrapper!</span>
        <br><span>““”̿ ̿ ̿ ̿ ̿’̿’̵͇̿̿з=(•̪●)=ε/̵͇̿̿/̿ ̿ ̿ ̿ ̿’““</span>
      </div>
    </div>
  </div>
</div>

如this Fiddle所示，此解决方案在存在垂直滚动条的情况下无法工作：width: 100vw; margin-left: calc(-50vw + 50%);没有考虑滚动条，因此子元素结束比屏幕更宽（注意：在没有滚动条的情况下完美运行）。

有没有办法解决这个问题，以便子元素采用完全全屏宽度？如果不是纯CSS那么用JS？

注意：100vw上的overflow规则在我的情况下是不可接受的，因为我需要孩子填写屏幕的确切宽度。

Answer 1

https://jsfiddle.net/k3nvkL35/4/

您在此处遇到的问题之一是我认为滚动条宽度不是通用的，因此您可能需要实现一些条件逻辑来影响宽度/边距。

话虽如此，你可能会觉得这很有用。下面的功能将通过将文档的高度与窗口的高度进行比较来检查文档是否具有垂直滚动条。根据所述滚动条的存在，它将修改子的宽度和边距以适合窗口。

同样，它可能需要调整，但它应该提供一个不错的基础。

＆＃13;

function adjustWidth() {
    if ($(document).height() > $(window).height()) {
        $(".child").css({
            "width": "calc(100vw - 18px)",
            "margin-left": "calc(-50vw + 50% + 9px)"
        });
    } else {
    	$(".child").css({
        	"width": "",
            "margin-left": ""
        })
    }
}

$(window).resize(adjustWidth).trigger("resize");

＆＃13;

.parent {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border: 3px solid green;
}

.child {
    height: 100px;
    background: red;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
    <div class="child">
        content
    </div>
</div>

＆＃13;

Answer 2

简单。由于父母没有以任何方式定位，因此孩子可以绝对定位。没有弄乱calc或其他方面，无处不在。

.child {
  height: 100px;
  background: red;
  position:absolute;
  left:0;
  right:0;
}

这是一个工作小提琴： https://jsfiddle.net/vgbr6qw2/

Answer 3

我找到this解决方案，该解决方案由this人提供，但我不知道是谁最初做的。我还没有完全测试它，所以它可能不适用于所有浏览器。我知道IE8不支持vw单元，好像有人在乎。

body {
  margin:0;
}
.wrapper {
  width:100%;
  max-width:400px;
  margin:0 auto;
  background:pink;
  /* margin is for display purposes on stack overflows fullscreen snippet view */
  margin-top:80px;
}
.full-width {
  width:100vw;
  margin-left:-50vw;
  left:50%;
  background:red;
  position:relative;
  color:white;
}

<div class="wrapper">
  <span>Hi. I'm a paragraph.</span>
  <div class="full-width">
      <p>You aint no paragraph, sucka!</p>
  </div>
  <strong>Be quiet, you weak losers.</strong>
</div>

非全屏宽度父元素的子元素的全屏宽度

3 个答案: