0

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

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

对我不起作用：绝对定位的 div 在右侧导致滚动条，而左侧没有。

在固定布局中可能徒劳的尝试之一：

#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;
}

谁能给我一些好的建议？谢谢你。

4

3 回答 3

2

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

mySelector
{
    overflow: hidden;
}

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

于 2012-03-30T10:26:22.590 回答
0

这是一篇相当老的帖子，但对于所有的谷歌人来说：

这个问题（https://stackoverflow.com/questions/13326111/element-outside-container-without-creating-scrollbars）对此有一些非常好的答案。如果我理解你的要求。

您可以使用“假主体”元素来做到这一点，或者在视口太小时使用断点来隐藏内容。

两者都是直截了当的选择。如果您“悬挂”面板中的内容只有在您可以看到全部/大部分内容时才有意义，那么断点选项可以为您节省一些带宽，并可能为用户节省一些挫败感。

于 2014-07-05T11:01:40.640 回答
0

为了详细说明 mediaashley 暗示的“假正文”选项，这意味着将您的内容（包括溢出元素）包装在这样的元素中：

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

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

于 2014-10-27T21:54:46.083 回答