页眉和页脚中的背景颜色要比设备宽度宽

时间：2014-10-27 21:07:33

标签： html css css3 responsive-design background-color

我试图让页眉和页脚中的背景颜色超出设备宽度，并且与我们网站上的高分辨率图像的宽度一样宽。我已经创建了这个jsfiddle（http://jsfiddle.net/g8o9u1js/）来证明我们的问题。

正如您所看到的，当您向右水平滚动以查看图像的其余部分时，灰色页脚和标题栏会被切断。请注意，我们希望保留大的高分辨率图像（不减小其尺寸），以便用户可以水平滚动并查看图像中的细节。此外，我们将在不同页面上具有多个高分辨率图像，并且这些图像将具有不同的宽度，因此将页脚和标题的宽度设置为固定宽度（例如，1920px）不提供通用解决方案。

您是否愿意提供可解决此问题的解决方案？非常感谢你的帮助:)）

以下是我们目前使用的代码：

HTML 

<div id="header">
    <div id="logodiv">
        <img id="logo" border="0" src="http://www.refugeeweek.org.uk/Resources/RefugeeWeek2012/Images/CounterpointsArts3.bmp">
        <br style="clear:both">
    </div>
</div>

<div id="description">     
    <h1 id="subject">Article with a high resolution image showing the top part of a nice painting </h1> 
    <p id="paragraph">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p> 
</div>

<div id="photo">    
    <img id="large" border="0" src="http://www.irmakennaway.com/images/stripe_27.jpg">   
</div> 

<div id="description">    
    <p id="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>

<div id="footer">
    <div id="footertext">
        <p id="details">About Us  |  Contact  |  Privacy<p>
    </div>
</div>

CSS 

div#header {
width:100%;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-bottom:10px;
background-color:#e1e1e1;
}

div#logodiv {
max-width:728px;
margin-left:auto;
margin-right:auto;
}

@media screen and (max-width:744px) and (min-width:345px) {
div#logodiv {
max-width:93%;
margin-left:auto;
margin-right:auto;
}
}

img#logo {
max-width:100%;
height:auto;
float:left;
}

div#description {
max-width:728px;
margin-left:auto;
margin-right:auto;
}

@media screen and (max-width:744px) and (min-width:345px) {
div#description {
max-width:93%;
margin-left:auto;
margin-right:auto;
}
}

div#photo {
width:100%;
overflow-x:scroll;
margin-top:2px;
margin-bottom:2px;   
}

img#large {
min-width:1600px;
margin:0px;
}

div#footer {
width:100%;
margin-left:auto;
margin-right:auto;
padding-top:4px;
padding-bottom:4px;
background-color:#e1e1e1;
}

div#footertext {
max-width:728px;
margin-left:auto;
margin-right:auto;
}

@media screen and (max-width:744px) and (min-width:345px) {
div#footertext {
max-width:93%;
margin-left:auto;
margin-right:auto;
}
}

p#details {
max-width:728px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

更新 用户Cdrini的答案为我们的问题提供了最佳解决方案。以下2行代码提供了非常整洁和视觉上引人注目的效果。我现在已经更新了原始小提琴以包含此解决方案。

div#photo {
width:100%;
overflow-x:scroll;
}

7 个答案:

答案 0 :(得分：0)

删除HTML上的图片代码并将其添加到CSS样式中：

DEMO：MY FIDDLE

CSS：

body, html{
    margin:0;
    padding:0;
}

#photo {
    height: 100px;
    background-image: url('http://www.irmakennaway.com/images/stripe_27.jpg');
    background-position: center center;
    background-repeat:no-repeat;
 }

HTML：

<div id="photo">    
       <!-- <img id="large" border="0" src="">   -->
 </div>

答案 1 :(得分：0)

100％with在他的容器上缩放，是Body。 body的容器= HTML。

SO：

html, body
{
margin: 0px;
}

答案 2 :(得分：0)

试试这个：

#photo{
    width: 100%;
    overflow:hidden;
}

答案 3 :(得分：0)

如果您希望标题与图像一样宽，则可以使用像素

设置宽度

我宁愿让图片宽度为100％所以你不需要滚动horizantali

答案 4 :(得分：0)

min-width: 728px;
width:100%;

在页眉和页脚中使用此代码

答案 5 :(得分：0)

我认为你可以通过稍微修改一下凯斯的答案来得到你想要的东西。将其添加到您的CSS：

div#photo {
  width:100%;
  overflow-x:scroll;
}

还要确保在页面的头部包含<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />，以使width:100%成为手机上的设备宽度（默认情况下不是这样）。

（请参阅此处的代码：http://jsbin.com/jovuhi/3/edit，或此处的结果：http://jsbin.com/jovuhi/3）

答案 6 :(得分：-1)

由于您在网站上使用每个元素的百分比宽度，您需要将高分辨率图像的宽度设置为屏幕大小的100％宽度，您可以使用以下CSS设置：

img#large {
     width: 100%;
}

jsFiddle Demo

如果您希望高分辨率图像的宽度保持不变，那么您需要为页眉和页脚<div>设置固定宽度，如下所示：

#header {
     width: 1920px;
}

#footer {
     width: 1920px;
}

<强> jsFiddle Demo

<强>更新

你需要在这里使用一个小jQuery，并在<img>标签内定义图像的宽度，如<img id="large" width="1920px" src="" />。这是您需要使用的jQuery代码：

$('#header').width($('img#large').width());
$('#footer').width($('img#large').width());

它的作用是将图像的宽度分配给header和footer，使它们的宽度与图像相等。您也可以使用另一个宽度的图像测试它，并在<img>标记内指定其宽度，就像我上面提到的那样。

这是一个有效的例子：

$('#header').width($('img#large').width());
$('#footer').width($('img#large').width());
body {
  margin: 0px;
}
div#header {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #e1e1e1;
}
div#logodiv {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 744px) and (min-width: 345px) {
  div#logodiv {
    max-width: 93%;
    margin-left: auto;
    margin-right: auto;
  }
}
img#logo {
  max-width: 100%;
  height: auto;
  float: left;
}
div#description {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 744px) and (min-width: 345px) {
  div#description {
    max-width: 93%;
    margin-left: auto;
    margin-right: auto;
  }
}
div#footer {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: #e1e1e1;
}
div#footertext {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 744px) and (min-width: 345px) {
  div#footertext {
    max-width: 93%;
    margin-left: auto;
    margin-right: auto;
  }
}
p#details {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <div id="logodiv">
    <img id="logo" border="0" src="http://www.refugeeweek.org.uk/Resources/RefugeeWeek2012/Images/CounterpointsArts3.bmp">
    <br style="clear:both">
  </div>
</div>
<div id="description">
  <h1 id="subject">Article with a high resolution image showing the top part of a nice painting </h1> 
  <p id="paragraph">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<div id="photo">
  <img id="large" width="1920px" border="0" src="http://www.irmakennaway.com/images/stripe_27.jpg">
</div>
<div id="description">
  <p id="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div id="footer">
  <div id="footertext">
    <p id="details">About Us | Contact | Privacy
      <p>
  </div>
</div>

<强> jsFiddle Demo

这是使用宽度为1648px的图片的 example ，您可以看到页眉和页脚的宽度也为1648px。

更新二：

经过一段时间的思考，这是我能提出的唯一解决方案。我已经在<span></span> div和header div之后添加了footer标记，并且<span>的{​​{1}}具有不同的类，从而稍微修改了您的HTML结构。接下来，我使用CSS设计了那些跨度，并使用jQuery为它们分配了与高分辨率图像相等的宽度。

$('.fullwidth').width($('img#large').width());
$('.fullwidthtwo').width($('img#large').width());
body {
  margin: 0px;
}
.fullwidth {
  background: rgb(225, 225, 225);
  position: absolute;
  display: block;
  height: 58px;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.fullwidthtwo {
  background: rgb(225, 225, 225);
  position: absolute;
  display: block;
  height: 58px;
  margin-top: -58px;
  left: 0px;
  z-index: -1;
}
div#header {
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #e1e1e1;
  z-index: -1;
}
div#logodiv {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 744px) and (min-width: 345px) {
  div#logodiv {
    max-width: 93%;
    margin-left: auto;
    margin-right: auto;
  }
}
img#logo {
  max-width: 100%;
  height: auto;
  float: left;
}
div#description {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 744px) and (min-width: 345px) {
  div#description {
    max-width: 93%;
    margin-left: auto;
    margin-right: auto;
  }
}
div#photo {
  margin-top: 2px;
  margin-bottom: 2px;
}
img#large {
  min-width: 1600px;
  margin: 0px;
}
div#footer {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: #e1e1e1;
}
div#footertext {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 744px) and (min-width: 345px) {
  div#footertext {
    max-width: 93%;
    margin-left: auto;
    margin-right: auto;
  }
}
p#details {
  max-width: 728px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <div id="logodiv">
    <img id="logo" border="0" src="http://www.refugeeweek.org.uk/Resources/RefugeeWeek2012/Images/CounterpointsArts3.bmp">
    <br style="clear:both">
  </div>
</div>
<span class="fullwidth"></span>

<div id="description">
  <h1 id="subject">Article with a high resolution image showing the top part of a nice painting </h1> 
  <p id="paragraph">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<div id="photo">
  <img width="1920px" id="large" border="0" src="http://www.irmakennaway.com/images/stripe_27.jpg">
</div>
<div id="description">
  <p id="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div id="footer">
  <div id="footertext">
    <p id="details">About Us | Contact | Privacy
      <p>
  </div>
</div> <span class="fullwidthtwo"></span>

<强> jsFiddle Demo

相关问题
最新问题