如何在使页眉占据浏览器窗口的整个宽度的同时将页面居中？ [英] How do I center my page while making my header take the full width of the browser window?
问题描述
我在网络上看到大量的演示，关于如何简单地将内容置于页面上。我想出了如何让我的页眉占据浏览器窗口的整个宽度，但是每当我尝试以我的内容为中心时，所有的浏览器都会扩展页面的宽度，所以我最终得到了一个水平滚动条。另一个问题是我的头文件与我的其他浏览器颜色不同，所以当我对文本进行更改时，它有时会更改头文件的宽度，以使颜色不填充窗口。本网站是我尝试实现 http://carlodiego.businesscatalyst.com/ 的一个很好的例子
我也想让我的头文件溢出：none;所以如果有人使浏览器窗口变小，标题开始消失。无论我做了什么其他事情，我一直在为此工作数小时。以下是我的代码。抱歉，但是很长。
< body>
< header>
< div id =wrapper>
< div id =fixed>
< div id =menu-container>
< ul id =navigationMenu>
< li>< a href =＃class =normalMenu>主页< / a>< / li>
< li>< a href =＃class =normalMenu>关于< / a>< / li>
< li>< a href =＃class =normalMenu> Work< / a>< / li>
< li>< a href =＃class =normalMenu>与我联系< / 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>前端< br>显影剂< / H1>
< / div>
< div id = content>
< h1 class =heading>关于< / h1>
< p>内容< / p>
< h2>目前正在使用< / h2>
< p>更多内容...< / p>
< h2>目前正在关注< / h2>
< p>克里斯米尔斯| David Sawyer Mcfarland |菲尔汤普森< / p>
< h1 class =heading>工作< / h1>
< / div>
< / div>
< / div>
< / body>
body {
margin：0;
padding：0;
border：0;
font-size：100％;
line-height：1.5;
font-family：'optimusprincepssemiboldRg';
背景：#fafafa;
background-color：#eeeeee;
}
文章，旁边，音频，画布，datalist，细节，figcaption，图，页脚，标题，hgroup，菜单，导航，部分，视频{
display：block;
}
#title {
font-family：'optimusprincepssemiboldRg';
颜色：黑色;
}
#last {
font-size：400％;
line-height：0;
margin-top：40px;
}
＃menu-container {
position：absolute;
margin-left：420px;
white-space：nowrap; / *停止包装文本* /
overflow：hidden;
}
#background {
background-color：#eeeeee;
位置：绝对;
身高：100％;
margin-top：20px;
保证金余额：20％;
保证金率：20％;
}
＃前端{
margin-top：100px;
font-size：200％;
宽度：100％;
text-align：center;
}
.heading {
font-size：300％;
}
#fixed {
position：relative;
height：200px;
}
标题{
width：100％;
overflow：hidden; / *这会阻止颜色消失* /
background-color：＃cee3ee;
}
#wrapper {
margin-left：20％;
保证金率：20％;
code> header 和 main divs。并使它们定位绝对。
，并使用 margin：0px auto; 来定位主。
类似于 http://jsfiddle.net/WAR4r/
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%;
}
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/
这篇关于如何在使页眉占据浏览器窗口的整个宽度的同时将页面居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
