jquery - Div 宽度 100%，即使屏幕扩展超过初始全宽

Question

我有以下代码。最初会有一个标题部分，其宽度将设置为 100%。但是当添加一些新的绝对 div 时，它位于屏幕的整个宽度之外(以便启用水平滚动)，标题的宽度将不会是 100%(因为已添加新空间)

请看下面的代码，我在其中模拟了这个问题。

我希望标题的宽度与屏幕的宽度相同，而与我看到的部分无关。我尝试使用 vw 而不是 % 但没有成功。

有没有办法在 css 本身中做到这一点？

或者我是否需要每次使用 jquery 动态更改宽度？

$(document).ready(function() {

  $("#btn").click(function() {


    $("#sample").toggle().css({
      top: 100,
      right: -110
    })
  });
})

body {
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  height: 100px;
  background: #ccc;
}
#sample {
  width: 300px;
  height: 200px;
  background: #444;
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
</div>

<div id="sample">
</div>

<button id="btn">Click here</button>

Answer 1

$(document).ready(function() {

  $("#btn").click(function() {


    $("#sample").toggle().css({
      top: 100,
      right: -110
    })
  });
})

body {
  margin: 0;
  padding: 0;
  padding-top: 100px;
}
#header {
  width: 100%;
  height: 100px;
  background: #ccc;
  position: fixed;
  top: 0px;
}
#sample {
  width: 300px;
  height: 200px;
  background: #444;
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
</div>

<div id="sample">
</div>

<button id="btn">Click here</button>