1

コードに 1 つの問題があり、解決策が見つかりません。左のサイドバー w: 300px h:100% があり、右の div (コンテンツ領域) を水平スクロールバーで w: 100% と h:100% にしたい..

しかし、コードに何か問題があり、わかりません。右の div がサイド バーを超えています。margin-left:300px を配置すると、100px の重みに 300px が追加されます。

あなたが私を理解してくれることを願っています、これが私のコードです:

HTML:

<div id="wrapper">
   <?php include '../side_bar.php' ?>

    <div id="content">
       <div id="scroll">
        <img src="../images/design1.jpg" width="759" height="565"> 
        <img src="../images/design1.jpg" width="759" height="565"> 
        <img src="../images/design1.jpg" width="759" height="565"> 
       </div>
    </div>
</div>

CSS:

body, html {
    margin: 0;
    padding: 0;
    height:100%;
    width:100%;
}

#wrapper {
    width:100%;
    height:100%;
    display:inline-block;
}

#side_bar {
    float:left;
    width:300px;
    height:100%;
    position:fixed;
    border-right:#000 solid 1px;
}

#content {
    float:left;
    height:100%;
    width:100%;
    position:fixed;
}

#scroll {
    height:100%;
    width:100%;
    display:inline-block;
    position:absolute;
    overflow-x:scroll;
    overflow-y:hidden;  
    white-space: nowrap; 
}
4

2 に答える 2

1

次の調整された CSS を使用して、必要な機能を得ることができました。

body, html {
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#wrapper {
width:100%;
height:100%;
display:inline-block;
}

#side_bar {
/*float:left;*/
top:0;
left:0;
width:300px;
height:100%;
position:fixed;
border-right:#000 solid 1px;
background-color:#333;
}

#content {
/*float:left;*/
top:0;
left:0;
height:100%;
width:100%;
position:fixed;
}

#scroll {
height:100%;
/*width:100%;*/
right:0px;
left:301px; /*Because of border */
display:inline-block;
position:absolute;
overflow-x:scroll;
overflow-y:hidden;  
white-space:nowrap;
}

うまくいけば、これが役に立ちます！

于 2013-01-24T21:34:42.840 に答える
0

jQuery 用のfullPage.jsプラグインを使用して、フルスクリーンの Web サイトを簡単に作成できます。

垂直セクションだけでなく、水平セクションも作成できます。

いくつかの長所：

  • マウスホイールを動かすオートスクロール
  • URL でのアンカー (#) の使用
  • タッチデバイスに対応
  • 古いブラウザー (> IE7) との互換性
  • コールバックと多くの便利な機能を提供します
  • さまざまなデバイスで強力にテスト済み
于 2014-12-10T15:56:15.883 に答える