非全屏寬度父級的子元素的全屏寬度

Question

這個問題建立在這個問題的基礎上，為了將全屏寬度應用於非全角父元素的子元素，在子元素上使用以下規則：

width: 100vw;
margin-left: calc(-50vw + 50%);

如該小提琴中所示，該解決方案在垂直滾動條的情況下不起作用： 100vw不考慮滾動條，因此子元素最終比屏幕寬（注意：在沒有滾動條的情況下完美地工作） 。

有沒有一種方法可以解決此問題，以便子元素完全占據整個屏幕寬度？ 如果不是在純CSS中使用JS？

注意：在我的情況下， body上的overflow規則是不可接受的，因為我需要孩子填充屏幕的確切寬度。

Answer 1

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

在此解決方案中遇到的問題之一是，我認為滾動條的寬度不是通用的，因此您可能需要實現一些條件邏輯來基於此影響寬度/邊距。

話雖如此，您可能會發現這很有用。 下面的功能通過將文檔的高度與窗口的高度進行比較，來檢查文檔是否具有垂直滾動條。 基於所述滾動條的存在，它將修改孩子的寬度和邊距以適合窗口。

同樣，它可能需要進行調整，盡管它應該提供良好的基礎。

 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"); 

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

 <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> 

Answer 2

簡單。 由於父母沒有任何位置，因此可以絕對地安置孩子。 不會干擾calc或其他方面，在任何地方都有效。

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

這是一個工作的小提琴： https : //jsfiddle.net/vgbr6qw2/

Answer 3

我發現這個解決方案，這是由采購這個家伙，但我不知道是誰最初做的。 我尚未對其進行全面測試，因此可能無法在所有瀏覽器中使用。 我知道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>