当前位置：文江博客话题详情

网站比浏览器宽，没有水平滚动条

发布于 2024-08-24 22:33:31 字数 264 浏览 5 评论 0原文

我正在开发一个网站，该网站的左上角、右上角、左下角和右下角都有希腊语。其完整宽度大约为 1100px。实际内容区域在 960px 布局内。

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

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

谢谢！

编辑：这确实必须在 IE6 中工作。不是我的选择:(

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

渡你暖光 2024-08-31 22:33:31

您可以在 CSS 中使用 overflow:hidden body 标记（或包含主要内容的任何容器标记）以防止滚动条。某些浏览器允许您将其限制为水平或垂直内容 (-ms-overflow-x 和 < code>overflow-x 在你的情况下，因为你正在处理水平溢出；有相应的 y 样式）。我认为这些是/将成为 CSS3 的一部分，根据

回复收藏 0 原文

已下线请稍等 2024-08-31 22:33:31

抱歉各位，但我可以看到此功能（包括 IE 6 和 7）正常工作的唯一方法是使用表格。

工作示例： 此处

“Greeble”文本（我真的不知道什么是 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">
          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>

I'm sorry folks, but the only way I can see this working including IEs 6 and 7 is using tables.

Working example: Here

The "Greeble" text (I don't really know what a greeble is :) distorts the resizing somewhat, that'll disappear when the columns have background images only.

Issues: The columns need to contain something to be rendered by IE. The I built in will prevent the complete disappearance of the right and left columns. You will have to find a way around that, maybe with a 1x1 Pixel image or something. You will always have to have some content - even if just 1 pixel wide - in all columns.

Relies on: Tables with an unspecified width rendering the way they do. I think this is pretty reliable, tough.

Tested in: IE 5.5 and greater, Firefox

To anybody who dares downvote this because tables are evil: Find me a better, CSS-based solution that works in IE6 as well, and I will gladly remove mine.

HTML: No separation between markup and CSS, no semantics, just the working prototype.

<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">
          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>

回复收藏 0 原文

樱娆 2024-08-31 22:33:31

我想我已经找到了一种非常简单的方法：为每个角元素添加一个空的 div，相对定位它，然后给它一个负值（或右侧的高正值）边距 - 似乎也适用于 IE 6 。

不过还是谢谢你的所有想法。

回复收藏 0 原文

旧故 2024-08-31 22:33:31

不确定你是否解决了这个问题，但我认为使用背景图像是可能的。如果将图像层叠在一起，而不指定其包含的 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 来根据图像和视口的大小来定位每个 greeble 背景图像，但这应该是可能的。

Not sure if you solved this, but I think it is possible using background images. If you layer the images on top of one another, without specifying a width for their containing divs, you should be able to pull it off. Here's the basics:

<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

I think you'd need to use a bit of JS to position each of the greeble background images depending on the size of the image and the viewport, but it should be possible.

回复收藏 0 原文

~没有更多了~