Question

我必须编写标记和CSS，以便背景图像不会产生滚动条。仅当视口比内部内容包装器更窄时，才会创建滚动条：

http://www.mcm.unisg.ch/

对我不起作用：Absolutely positioned div on right causing scrollbar when the left doesn't。

固定布局可能徒劳无功：

#background {
  width: auto;
  margin-left: -75px;
  margin-right: -75px;
}

通过向左滚动无法访问从左侧包含块中挂出的区域（由于负边距）。是!但是负边距右边会创建一个滚动条狭窄视口的情况。只要viewpart比包含块宽，我该如何阻止滚动条？

标记：

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>&nbsp;</title>
  <link rel="stylesheet" type="text/css" href="css/general.css" media="screen, projection"/>
  <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="css/general-ie.css" media="screen"/>
  <![endif]-->
</head>
<body>

  <div id="page">
    <img id="background" src="images/visual.jpg" alt="" />
    <div id="head"><h1>Page title</h1></div><!-- /#head -->
    <div id="mainpart">
      <ul id="zones">
        <li>
          <ul>
            <li class="module">Modul #1</li><!-- /#module -->
          </ul>
        </li>        
      </ul><!-- /#zones -->
      <hr />
    </div><!-- /#mainpart -->
  <div id="foot"><h1>Footer</h1></div><!-- /#foot -->
</div><!-- /#page -->

</body>
</html>

CSS规则：

body {
  background: #000;
  color: #000;
}
#page, #mainpart {
  background: #fff;
}

#page {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: auto;
  margin-left: -75px;
  margin-right: -75px;
}

有人可以给我一些好的假设吗？谢谢。

Answer 1

要防止出现滚动条，请使用：

mySelector
{
    overflow: hidden;
}

你可以在这里看到它的所有荣耀：jsFiddle example。

Answer 2

这篇相当古老的文章，但对于所有Google员工而言：

This question (https://stackoverflow.com/questions/13326111/element-outside-container-without-creating-scrollbars)对此有一些非常好的答案。如果我理解你的要求。

你可以使用＆＃34;假身体＆＃34;元素，或使用断点只在视口太小时隐藏内容。

两者都是直截了当的选择。如果你的内容是＆＃34;挂＆＃34;只有当你可以看到所有/大部分时，面板才有意义，然后断点选项可以为你节省一些带宽，并可能为用户带来一些挫败感。

Answer 3

详细说明＆＃34;假身体＆＃34; mediaashley暗示的选项，它意味着将包含溢出元素的内容包装在这样的元素中：

#fakeBody {
    width: 100%;
    min-width: 1000px; // needs to match the main content’s width
    overflow: hidden;
}

宽度：100％表示它将与窗口的宽度匹配，但是当窗口小于min-width时，其overflow：hidden属性将切断挂出的内容。

如果区域从包含块中挂出，如何防止滚动条？

3 个答案: