如何创建即使调整浏览器窗口大小仍保持全宽的全宽页眉

假设我创建了一个id为header的div，如下所示<div id="header"></div>和在css上我写

#header{
  width:100%;
  height:100px;
  background-color:#00ff00;
  margin:0;
  padding:0;}

这会创建一个全宽的标题，但当我重新调整浏览器的宽度并使用滚动条向右滚动时，我发现背景没有达到浏览器的全宽，这与我使用背景图像时的情况相同，有人知道这个的解决方案吗

首先，如果要将其真正用作标头，则应使用<header>标记来保持HTML语义，而不是通常的<div>方法。

其次，由于<html>和<body> 的默认格式，您可能会看到100%宽度的问题

如果你想有一个全宽度的标题，你需要这样做：

html,body{ /* basic html, body reset */
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}
#header{
    width: 100%;
    height: 250px; /* easier to visualize with a larger header size */
    background: url('someimage.url');
    background-size: cover;
    background-position: center;
}

background-cover-css属性对于保持纵横比非常有用，尤其是对于响应型网站。

CSS

#header {
    width:100%;
    height:100px;
    background: url(http://oi49.tinypic.com/9kpge0.jpg);
    background-size:100% 100%;
    background-repeat: no-repeat;
}

DEMO

相关内容

最新更新

热门标签：