Fatal编程技术网
  • css/
  • Css 如何使页眉占据整个浏览器窗口的宽度，同时使页面居中？

Css 如何使页眉占据整个浏览器窗口的宽度，同时使页面居中？

css

Css 如何使页眉占据整个浏览器窗口的宽度，同时使页面居中？,css,header,width,center,Css,Header,Width,Center,我在网上看到了大量的演示，展示了将内容集中在页面上是多么“简单”。我想出了如何使我的标题占据整个浏览器窗口的宽度，但是每当我尝试将内容居中时，我的所有浏览器都会扩展页面的宽度，因此我最终得到了一个水平滚动条。另一个问题是，我的标题颜色与浏览器的其他部分不同，因此，当我对主体进行更改时，有时会更改标题的宽度，以便颜色不会填充窗口。这个网站是我努力实现的一个很好的例子 我还希望我的头有溢出：无；因此，如果有人使浏览器窗口变小，标题开始消失。我已经为此工作了好几个小时了，不管我做什么其他的事情。下面是

我在网上看到了大量的演示，展示了将内容集中在页面上是多么“简单”。我想出了如何使我的标题占据整个浏览器窗口的宽度，但是每当我尝试将内容居中时，我的所有浏览器都会扩展页面的宽度，因此我最终得到了一个水平滚动条。另一个问题是，我的标题颜色与浏览器的其他部分不同，因此，当我对主体进行更改时，有时会更改标题的宽度，以便颜色不会填充窗口。这个网站是我努力实现的一个很好的例子

我还希望我的头有溢出：无；因此，如果有人使浏览器窗口变小，标题开始消失。我已经为此工作了好几个小时了，不管我做什么其他的事情。下面是我的代码。对不起，太长了

<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%;
}



    

  • 

  • 

  • 

  • 


亚历克斯
查帕罗
前端
显影剂
关于
内容

当前使用
更多内容

当前跟踪
克里斯·米尔斯|大卫·索耶·麦克法兰|菲尔·汤普森

工作
身体{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
线高：1.5；
字体系列：“optimusprincepssemiboldRg”；
背景：#fafafa；
背景色：#eeeeee；
}
文章、旁白、音频、画布、数据列表、详细信息、图表、页脚、页眉、H组、菜单、导航、部分、视频{
显示：块；
}
#头衔{
字体系列：“optimusprincepssemiboldRg”；
颜色：黑色；
}
#最后{
字体大小：400%；
线高：0；
边缘顶端：40px；
}
#菜单容器{
位置：绝对位置；
左边距：420px；
空白：nowrap；/*停止文字换行*/
溢出：隐藏；
}
#背景{
背景色：#eeeeee；
位置：绝对位置；
身高：100%；
边缘顶部：20px；
左缘：20%；
保证金权利：20%；
}
#前端{
边缘顶部：100px；
字体大小：200%；
宽度：100%；
文本对齐：居中；
}
.标题{
字体大小：300%；
}
#固定的{
位置：相对位置；
高度：200px；
}
标题{
宽度：100%；
溢出：隐藏；/*这会阻止颜色消失*/
背景色：#cee3ee；
}
#包装纸{
左缘：20%；
保证金权利：20%；
}
您想要一个
标题
和
main
div。并使其
绝对
定位。
并使用
边距：0px自动用于将主管道居中


类似这样的东西
我想你指的是视口吧？浏览器是一种软件。不是你在网站上看到的东西。通过居中，你是指垂直居中还是水平居中？展示你的代码尝试，这样我们就有东西要“修复”。我们不会从头开始写一页，这让我的方向正确。最小化页面时，顶部的颜色不会占据整个宽度。如果我没有把我的问题说清楚，我很抱歉。我没有把我的代码放在那里，因为我认为它太长了。下次我会做的。你说上面的颜色是什么意思？如果你指的是页眉，那么不管页面大小，它都会占据整个页面的宽度{文本对齐：对；并添加背景色。然后将窗口缩小一个水平滚动条，如果您将其向右移动，您将看到颜色不再存在。如何避免这种情况？我看不出有任何问题。不，我去掉了边框，制作了.main 960px，并在标题中添加了一些内容。如果您使用浏览器windo稍微小一点，就会出现一个水平滚动条，如果你向右滚动，你会看到红色消失了，背景是白色。