Question

我有一个我正在制作的网站，左上角，右上角，左下角和右下角都有绿色。其全宽约为1100px。实际内容区域在960px布局内。

我希望网站正确居中到960px，额外的图像从左右消失，但如果超过960px则不会导致任何水平滚动。

所有四个图像都是单独的文件（无法真正加入它们），并且已经存在背景图像。我是否提到它们是通过CSS添加的，而不是作为文件内图像添加的？

谢谢！

编辑：这真的必须在IE6中运行。不是我的选择:(

Answer 1

您可以在CSS中使用overflow: hidden作为body标记（或您拥有主要内容的任何容器标记）以防止滚动条。有些浏览器允许您将其限制为水平或垂直内容（-ms-overflow-x和overflow-x，因为您正在处理水平溢出;还有相应的y样式。根据{{3}}，我认为这些将成为CSS3的一部分。

Answer 2

我很抱歉，但是我能看到这个工作的唯一方法，包括IE 6和7正在使用表格。

工作示例： Here

“Greeble”文本（我真的不知道什么是绿色的:)有点扭曲调整大小，当列只有背景图像时，它会消失。

问题：列需要包含要由IE呈现的某些内容。我内置的 将阻止左右列完全消失。您将不得不找到一种方法，可能使用1x1像素图像或其他东西。在所有列中，您总是必须拥有一些内容 - 即使只有1个像素宽。

依赖：具有未指定宽度的表格呈现它们的方式。我认为这很可靠，很难。

经过测试： IE 5.5及更高版本，Firefox

对于任何胆敢投票的人，因为桌子是邪恶的：找到一个更好的，基于CSS的解决方案，也适用于IE6，我很乐意删除我的。

HTML：标记和CSS之间没有分离，没有语义，只有工作原型。

<body style="margin: 0px">
<table style="width: 100%; height: 100%" border="0" 
      cellspacing="0" cellpadding="0">
   <tr>
     <td style="background-color: orange; height: 50%; color: white">
     Greeble top left
     </td>

     <!-- The content area -->
     <td style="width: 960px" rowspan="2">
      <!-- This is important, serves as min-width replacement. -->
      <div style="width: 960px; text-align: center">
        &nbsp; I will always be 960 pixels wide
      </div>
     </td>

     <td style="background-color: blue; color: white">
     Greeble top right
     </td>
   </tr>
   <tr>
     <td style="background-color: blue; height: 50%; color: white">
     Greeble bottom left
     </td>
    <td style="background-color: green; height: 50%; color: white">
     Greeble bottom right
    </td>
 </tr>
</table>
</body>

Answer 3

我想我已经找到了一个非常简单的方法：为每个角元素添加一个空div，相对定位它然后给它一个负数（或rhs的高正值）边缘 - 似乎可以工作IE 6也是。

感谢所有的想法。

Answer 4

不确定你是否解决了这个问题，但我认为可以使用背景图片。如果将图像叠加在一起，而不指定其包含div的宽度，则应该能够将其拉出。这是基础知识：

<body style="background: url(body-bg.png);">
    <div style="background: url(greeble1.png);"></div>
    <div style="background: url(greeble2.png);"></div>
    <div style="background: url(greeble3.png);"></div>
    <div style="background: url(greeble4.png);"></div>
    <div class="wrapper" style="width: 960px;">
      <p>Main Content Area</p>
    </div>
</body

我认为您需要使用一些JS来定位每个绿色背景图像，具体取决于图像和视口的大小，但它应该是可能的。

站点比没有水平滚动条的浏览器更宽

4 个答案: