当屏幕分辨率降低时，header 移出，即使我有 width: 100%;

Question

请帮忙！当屏幕分辨率降低时，header 移出，即使我有 width: 100%;我一直在寻找答案，但到处都找不到！

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  width: 100%;
  background-color: darkblue;
}

<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

Answer 1

width:100%没有任何问题，你只是通过将子元素宽度设置为大于父元素而overflow。

一个可能的解决方案，使用overflow:hidden或overflow:scroll（由你想要的效果决定）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  width: 100%;
  background-color: darkblue;
  overflow:scroll;
}

<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhhjhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

或者使用overflow-wrap: break-word让溢出的内容自动转到下一行

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;

}

header {
   overflow-wrap: break-word;;
  width: 100%;
  background-color: darkblue;
}

<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

Answer 2

取决于您的预期行为，您可以执行以下两个选项之一

为 header 设置 word-break 以将单词换行并保留 max-width。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  word-break: break-all;
  width: 100%;
  background-color: darkblue;
}

<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

或者使用overflow到hide/show溢出文本的滚动条

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  overflow: hidden;
  width: 100%;
  background-color: darkblue;
}

<header>
  <div class="container">
    ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
  </div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>

当屏幕分辨率降低时，header 移出，即使我有 width: 100%;

When the screen resolution decreases, the header moves out, even though I have width: 100%;

html

css

frontend

web