Geek asks and answers

Full width, no wrapper

I am working on a website and I think I will see if there is a better way to achieve the same result.

Problem: The page consists of several sections, each with its own background, which should be the full width of the browser. The content in each section is in the center with a resolution of 960 pixels. I am currently wrapping each section in an apparently independent wrapper. Is anyone better versed?

Code example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Problem Example</title>

<style>
    .content{
        width:960px;
        margin: 0 auto;
        padding: 90px 0;
        background: rgba(0,0,0,0.5);
    }

    #header_wrapper{
        background: red
    }

    #content_wrapper{
        background: green
    }

    #footer_wrapper{
        background: yellow
    }
</style>
</head>

<body>
<div id="header_wrapper">
    <div class="content">
        Header Content
    </div>
</div>
<div id="content_wrapper">
    <div class="content">
        Content Content
    </div>
</div>
<div id="footer_wrapper">
    <div class="content">
        Footer Content
    </div>
</div>
</body> 
</html>

Ideal solution : the same page, but without 3 additional shell dividers.

Anyone suggestions?

+3
source share
6 answers

Your requirements are contradictory.

, ( ), 960px. div 100% 960 . JavaScript, , div.

+1

bg, , .

+2

- ?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Problem Example</title>

<style>
    .section{
        width:960px;
        margin: 0 auto;
        padding: 90px 0;
        background: rgba(0,0,0,0.5);
    }

    .header  {background: red   }
    .content {background: green }
    .footer  {background: yellow}

</style>
</head>

<body>
<div class="header section">
    Header Content
</div>
<div class="content section">
    Content Content
</div>
<div class="footer section">
    Footer Content
</div>
</body> 
</html>
0

, , div content body. , , div.

0

, , (: before,: after) . , , , , .

, csstricks.

0

, , , , , , .

, , .

<main>
    [your content here]
</main>

main {
    background: red;
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

main::before {
    background: blue;
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50vw;
    right: -50vw;
    z-index: -1;
}

:: after, .

, , , ( ) . , <main>. , , . , .

, . ( - <main>/your element) , , . overflow-x: hidden , . , , .

, , ( , , ), , .

I don’t know how this solution works in terms of performance, since I don’t know how rendering engines work these days. There was a time when everything that was off the screen was also shown (hence the reason why the infamous technique of hiding elements quickly turned into a trash can), but this should not be a problem these days.

0
source

More articles:


All Articles