Please help! When the screen resolution decreases, the header moves out, even though I have width: 100%; I was looking for answers and didn't find it anywhere!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1140px;
margin: 0 auto;
}
header {
width: 100%;
background-color: darkblue;
}
<header>
<div >
ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
</div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>
CodePudding user response:
There is nothing wrong with the width:100%
, you just made overflow
by setting the child element width to greater than the parent element.
A possible solution, use overflow:hidden
or overflow:scroll
(determined by which effect you want)
* {
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 >
ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhhjhhhjkhnkj
</div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>
Or use overflow-wrap: break-word
to let overflowed content automactially go to next line
* {
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 >
ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
</div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>
CodePudding user response:
Depends on your expected behavior, you can do either of the two options below
Set word-break for the header to break words into a new line and preserve 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 >
ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
</div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>
Or use overflow to hide/show scrollbar for the overflowed text
* {
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 >
ghjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjhjhh jhhhjkhnkj
</div>
</header>
<section>hgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</section>