Fatal编程技术网
  • css/
  • 制作标题全屏（宽度）css

制作标题全屏（宽度）css

css

制作标题全屏（宽度）css,css,Css,我试图扩展我的标题以覆盖整页。我希望它看起来像这个我已经试了好几个小时了。非常感谢您的帮助。设置最大宽度：1250px当前位于#容器上的身体上。这样你的头球将是他父母（身体）的100%。 您可以使用容器元素实现此效果，然后只需将包含元素的边距设置为0 auto，它将居中 标记 <div id="header"> <div id="headerContent"> Header text </div> </div> 从

我试图扩展我的标题以覆盖整页。我希望它看起来像这个我已经试了好几个小时了。非常感谢您的帮助。

设置
最大宽度：1250px当前位于#容器上的身体上。这样你的头球将是他父母（身体）的100%。

您可以使用容器元素实现此效果，然后只需将包含元素的边距设置为
0 auto
，它将居中

标记


<div id="header">
    <div id="headerContent">
        Header text
    </div>
</div>



从
主体
上卸下
最大宽度
，并将其放入
#容器

因此，不是：


body {
    max-width:1250px;
}


你应该：


#container {
    max-width:1250px;
}



#标题{
保证金：0；
填充：0；
宽度：100%；
背景：xxxx；
}
#标题#内容{
保证金：0px自动；
宽度：800px；/*或其他*/
}
这里的东西

html：


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<ul class="menu">
    <li><a href="#">My Dashboard</a>
        <ul>
            <li><a href="#" class="learn">Learn</a></li>
            <li><a href="#" class="teach">Teach</a></li>
            <li><a href="#" class="Mylibrary">My Library</a></li>
        </ul>
    </li>
    <li><a href="#">Likes</a>
        <ul>
            <li><a href="#" class="Pics">Pictures</a></li>
            <li><a href="#" class="audio">Audio</a></li>
            <li><a href="#" class="Videos">Videos</a></li>
        </ul>
</li>
    <li><a href="#">Views</a>
        <ul>
            <li><a href="#" class="documents">Documents</a></li>
            <li><a href="#" class="messages">Messages</a></li>
            <li><a href="#" class="signout">Videos</a></li>
        </ul>
    </li>
        <li><a href="#">account</a>
        <ul>
            <li><a href="#" class="SI">Sign In</a></li>
            <li><a href="#" class="Reg">Register</a></li>
            <li><a href="#" class="Deactivate">Deactivate</a></li>
        </ul>
    </li>
    <li><a href="#">Uploads</a>
        <ul>
            <li><a href="#" class="Pics">Pictures</a></li>
            <li><a href="#" class="audio">Audio</a></li>
            <li><a href="#" class="Videos">Videos</a></li>
        </ul>
    </li>
    <li><a href="#">Videos</a>
    <ul>
            <li><a href="#" class="Add">Add</a></li>
            <li><a href="#" class="delete">Delete</a></li>
    </ul>
    </li>
    <li><a href="#">Documents</a>
    <ul>
            <li><a href="#" class="Add">Upload</a></li>
            <li><a href="#" class="delete">Download</a></li>
    </ul>
    </li>
</ul>
</body>
</html>


演示


还可以尝试调整浏览器选项卡的大小，以查看其运行情况
使标题全屏显示的最佳方法是将高度设置为100vh


min-height: 100%;
position: relative;



#header{
height: 100vh;
}



只需将标题宽度设置为100vw，使其为全屏宽度

并将收割台高度设置为100vh，使其成为全屏高度
设置车斗最大宽度：110%；
使页眉上的宽度为110%，它将在左侧留下一个小的边距，您可以用左边的边距来固定：-8px；
利润上限：-10px
 就这么做吧


#RandomDiv{
    width: 100%;
}



JSFIDLE演示之所以有效，是因为它包含normalized.css（）。除非我也将H1的边距设置为0px，否则这段代码在Chrome上不起作用。@WoodenKitty真漂亮！呵呵，不管怎么说，这个答案现在已经老掉牙了。。使用id的抖动。我继续删除了H1，因为它无论如何都不需要，可以减少混乱。这个答案很简单。如果能给我一些解释就好了。。。

min-height: 100%;
position: relative;



#header{
height: 100vh;
}



#RandomDiv{
    width: 100%;
}