CSS: header full screen width with other content unwrapped
Question
The code:
<!DOCTYPE html>
<html><head><title>${title}</title><meta charset="utf-8" /></head>
<style>
body {
margin: 0;
padding: 0 20px;
width: 300px;
background-color: cornflowerblue;
}
div#header {
padding: 20px 20px;
margin: 0 -20px;
background-color: palegoldenrod;
}
</style>
<body>
<div id="header">
<h1><code><div id="header"></code></h1>
<p>Page header. Page header. Page header. Page header. Page header. Page header.</p>
</div>
<h1><code><body></code></h1>
<p>Page content. Page content. Page content. Page content. Page content.</p>
</body>
</html>
gives the picture:
In this layout, how to make the header area be full screen width. The main content (everything outside the div ) must not be wrapped into any container. And only HTML and CSS I'm allowed to use. Also I need the layout to be as simple as possible.
A little bit more details. The header is fixed so can be (reasonably) more complex. The main page content is generated out of Markup source and contains no layout and geometry adjustments. Though it's possible to wrap the main context into, eg, a div , I don't want to do it as it probably affects the render speed.
And I want the body width to be fixed.
4 answers
solution1
1 2021-05-25 07:22:53
Remove width property from body .
solution2
1 2021-05-25 07:28:16
Remove Width from body
body { margin: 0; padding: 0 20px; background-color: cornflowerblue; } div#header { padding: 20px 20px; margin: 0 -20px; background-color: palegoldenrod; }
<body> <div id="header"> <h1><code><div id="header"></code></h1> <p>Page header. Page header. Page header. Page header. Page header. Page header.</p> </div> <h1><code><body></code></h1> <p>Page content. Page content. Page content. Page content. Page content.</p> </body>
solution3
0 2021-05-26 07:00:55
The following works but not good enough:
div#header {
padding: 20px 0px;
margin: -20px -20px 0;
background-color: palegoldenrod;
width: 100vw;
}
When the vertical scrollbar appears it always causes the horizontal scrollbar doesn't matter whether it's really required. This is unacceptable to me but maybe someone else will be ok with it.
solution4
0 2021-05-27 07:12:04
Couldn't find anything better than wrapping the page content:
<!DOCTYPE html>
<html><head><title>${title}</title><meta charset="utf-8" /></head>
<style>
body {
margin: 0;
padding: 20px 20px 0;
background-color: cornflowerblue;
}
div#header_area {
padding: 1px 20px;
margin: -21px -20px 0;
background-color: palegoldenrod;
}
div#header {
width: 300px;
}
div#content {
width: 300px;
}
</style>
<body>
<div id="header_area">
<div id="header">
<h1><code><div id="header"></code></h1>
<p>Page header. Page header. Page header. Page header. Page header. Page header.</p>
</div>
</div>
<div id="content">
<h1><code><body></code></h1>
<p>Page content. Page content. Page content. Page content. Page content.</p>
</div>
</body>
</html>
Anyway it doesn't work completely as expected. When scrolling right (need to increase the width for that) the header area fill is removed on the right. Still can accept this as horizontal scrolling must not be typical in this case.
Looks like CSS standard and browser producers do everything to make the simplest things extremely complex:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.