5

ウィンドウが狭すぎる場合に、水平スクロールバーを作成せずに、バナーをコンテナーの外に到達させることはできますか?

以前に負のマージンでこれを行ったと思っていましたが、今は機能しません。

デモ: http://jsfiddle.net/Znarkus/s95uz/

<div id="main">
    <div id="banner">I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>
    <div id="content">

    </div>
</div>

</p>

4

3 に答える 3

1

スクロールバーが必要かどうかに応じて、最小幅が 500px または幅 100% のコンテナーを使用できます。相対位置を追加し、オーバーフローを非表示にしてから、その内部に幅500pxの別のコンテナを追加し、左右にautoのマージンを設定します。position absolute; を使用してコンテンツを内部コンテナー内に配置します。この場合、あなたの #banner は正しいでしょう: -50px;

ここであなたのフィドルを変更しました：http://jsfiddle.net/s95uz/14/

<style type="text/css">
#main {
min-width:500px;
margin: 0 auto;    
position: relative;
overflow: hidden;
}
#inside{
width:500px;
margin:0 auto;
height:100%;
position:relative;
background: red;
}
#banner {
background: green;
position: absolute;
right: -50px;
width: 150px;
height: 300px;
}
#content {
width: 400px;
height: 500px; /* Simulate content */
background: blue;
}
</style>

<div id="main">
   <div id="inside">
      <div id="banner">
    I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>    
      <div id="content"></div>
   </div>
</div>
于 2013-05-13T00:30:43.993 に答える
0

コンテンツとバナーがビューポートより高い場合、レスポンシブ CSS を使用してバナーを非表示にすることができます。

@media only screen and (max-width: 550px) {
        #banner { display: none;}
    }
于 2012-11-10T23:08:05.490 に答える
0

overflow : hidden を div "main" css に追加するだけです。

これを要素に追加すると、可能な条件付きサイドバーが非表示になります。

新しい CSS は次のようになります。

#main {
    width: 500px;
    margin: 0 auto;
    background: red;
    position: relative;
    overflow:hidden;
}
于 2012-11-10T23:13:45.170 に答える