0

背景画像がスクロールバーを生成しないように、マークアップと CSS を作成する必要があります。ビューポートが内側のコンテンツ ラッパーよりも狭い場合にのみ、スクロールバーが作成されます。

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

私にはうまくいきません: div を右に絶対に配置すると、左がそうでない場合にスクロールバーが発生します。

固定レイアウトでの無駄な試みの 1 つ:

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

含まれているブロックから左にぶら下がっている領域 (負のマージンのため) は、左にスクロールしても到達できません。はい！ただし、margin-right を負にすると、ビューポートが狭い場合にスクロールバーが作成されます。ビューパートが含まれているブロックよりも広い限り、スクロールバーを防ぐにはどうすればよいですか?

マークアップ:

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

これはかなり古い投稿ですが、そこにいるすべての Google 社員のために:

この質問 (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 に答える