How do I center my page while making my header take the full width of the browser window?

问题

I've seen tons of demos on the web about how "simple" it is to center the content on your page. I figured out how to make my header take up the entire width of the browser window however whenever I try to center my content all my browsers extend the width of the page, so I end up having a horizontal scrollbar. The other problem is my header is a different color than the rest of my browser so when I make changes to the body sometimes it changes the width of the header so that the color doesn't fill the window. This website is a great example of what I am trying to achieve http://carlodiego.businesscatalyst.com/

I also want my header to have overflow: none; so that if someone makes the browser window smaller the header begins to disappear. I've been working on this for hours a regardless what I do something else breaks. Below is my code. Sorry but it's lengthy.

<body>
<header>
    <div id="wrapper">
        <div id="fixed">
            <div id="menu-container">
                <ul id="navigationMenu">
                    <li><a href="#" class="normalMenu">Home</a></li>
                    <li><a href="#" class="normalMenu">About</a></li>
                    <li><a href="#" class="normalMenu">Work</a></li>
                    <li><a href="#" class="normalMenu">Contact Me</a></li>
                </ul>
            </div>
            <div id="title">
            <h1>Alex</h1>
            <h1 id="last">Chaparro</h1>
            </div>
        </div>

</header>

        <div id="background">

        <div id="front-end">
           <h1>Front-End <br> Developer</h1>
        </div>
        <div id=content>

            <h1 class="heading">About</h1>
            <p>content</p>

            <h2>Currently Using</h2>
            <p>More Content...</p>

            <h2>Currently Following</h2>
            <p>Chris Mills | David Sawyer Mcfarland | Phil Thompson </p>

            <h1 class="heading">Work</h1>

        </div>
      </div>
</div>
</body>


body {
    margin: 0;
    padding:0;
    border: 0;
    font-size: 100%;
    line-height: 1.5;
    font-family: 'optimusprincepssemiboldRg';
    background: #fafafa;

    background-color: #eeeeee;
    }



article, aside, audio, canvas, datalist, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {
    display: block;
}

#title {
    font-family: 'optimusprincepssemiboldRg';
    color: black;
}

#last {
    font-size: 400%;
    line-height: 0;
    margin-top: 40px;
}

#menu-container {
    position: absolute;
    margin-left: 420px;
    white-space: nowrap; /* stops text from wrapping */
    overflow: hidden;
}

#background {
    background-color: #eeeeee;
    position: absolute;
    height: 100%;
    margin-top: 20px;
    margin-left: 20%;
    margin-right: 20%;
}

#front-end {
    margin-top: 100px;
    font-size: 200%;
    width: 100%;
    text-align: center;
}

.heading {
    font-size: 300%;
}

#fixed {
    position: relative;
    height: 200px;
}

header {
    width: 100%;
    overflow: hidden; /*This stops the color from going away*/
    background-color: #cee3ee;
}

#wrapper {
    margin-left: 20%;
    margin-right: 20%;
}

回答1:

you want to have a header and main divs. and make them absolute positioned. and use margin:0px auto; for centering the main.

something like this http://jsfiddle.net/WAR4r/

来源：https://stackoverflow.com/questions/15456945/how-do-i-center-my-page-while-making-my-header-take-the-full-width-of-the-browse

标签

css

header

width

center