Question

我试图在内容div周围获取一些背景图像。事实是，内容div应该具有灵活的宽度（没问题）。背景图片应始终左右连接到内容div。但是：只有当用户将窗口缩小到内容div的宽度时，才应触发水平滚动条。

我想出了类似的东西：

<div>
    <div class="header">/div>
 <div class="wrapper">  
     <div class="left"></div>
     <div class="right"></div>
     <div class="content">Content</div>
 </div>
    <div class="footer">/div>
</div>



.wrapper{
 margin:auto;
 width:950px;
position:relative;
}

.left {
background:transparent url(../images/left.png) no-repeat scroll 0 0;
position:absolute;
top:0;
left:-120px;
width:120px;
height:500px;
}

.right {
background:transparent url(../images/right.png) no-repeat scroll 0 0;
position:absolute;
top:0;
right:-120px;
width:120px;
height:500px; 
}

当窗口到达正确的绝对div时，始终会出现滚动条。我需要它们是两个div（左/右），因为内容div应该是灵活的，并且当它延伸到很多时不会隐藏背景。

有人得到了一个tecnique吗？

Answer 1

你有一个未命名的普通根容器div。

为该div添加此样式（或将类/ id名称赋予wire css减速度）。要点是min-width ...与容器div的宽度保持一致。

同时添加body,html{margin:0;padding:0;}会更好。

style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"

这对于ie6会很好。对于ie，你可以应用一些js magic。

假设您正在使用jquery库，并将id名称“shell”提供给根容器div。然后只为ie6尝试此脚本。（创建排除或类似的东西）：

$(document).ready(function(){
 $('#shell').each(function(){
  var that = this;
  var contentWidth = 950;
  check();
  $(window).resize(check);
  function check() {
   var winWidth = Math.ceil($('body').width());
   if(winWidth <= contentWidth) {
    $(that).css({'width':contentWidth});
   } else {
    $(that).css({'width':'100%'});
   }
  }
 });
});

此脚本将使“shell”的宽度为100％。（如果浏览器的宽度大于950px），否则它将使用950px锁定shell的宽度，这将启用滚动条。

Answer 2

我为一个网站做了类似的事情，我带来的解决方案是：

我在背景上创建了一个左右内容的图像，中间内容的空间只是一个纯色，即使图像是1400 x 539，它的重量为12 KB，所以它非常好。

<html>
  <body>
    <div id="wrapper"></div>
  </body>
</html>


body {
  background: #fff url(left-and-right.jpg) no-repeat center top;
  text-align: center;
}

#wrapper {
  margin: auto;
  text-align: left;
  width: 960px;
}

背景图片灵活的内容？

2 个答案: