1

2 つの DIV が並んでいます。1 つの div はサイド バー (画面の左) で、もう 1 つの div はメイン コンテンツ (画面の右) です。

私が探しているもの: 私が欲しいのは、画面の右端にある 1 つの目に見えるスクロール バーです。そのスクロールバーで左右の両方のdivをスクロールしたいと思います。

私の問題: 現在、左側のサイドバーにツリー メニューがあります。ツリー メニューを展開すると、展開されたサイド バーのコンテンツを下にスクロールするためのスクロール バーが表示されません。サイド バーにスクロール バーを追加することはできますが、見栄えがよくありません。両方のdivを処理する右端に1つのスクロールバーが必要です。
誰かがこれについて私を助けることができますか?

私のindex.phpファイル

<?php

include 'sidebar.php';
include 'main_body.php';

?>

じぶんのsidebar.php

<?php

    echo '<link rel="stylesheet" href="css/style.css" type="text/css">';
    echo '<script type="text/javascript" src="js/jquery1_3_2.js"></script>';

    include 'function/functions.php';
    // Establish a connection to our database
    db_connect();

    echo'
    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".content").hide();
      //toggle the componenet with class msg_body
      jQuery(".heading").click(function()
      {
        jQuery(this).next(".content").slideToggle(500);
      });
    });
    </script>
    ';

    echo'<div class="sidebar">';

    // Side Bar Start
    echo '
    <img src="images/hdc_logo.png">
    <br>
    <br>

    <p class="heading"><strong>CUSTOMER</strong></p>
    <div class="content">';

    //Display all customers from database
    query_all_customers();

    echo '</div>
    <p class="heading"><strong>CABINET</strong></p>
    <div class="content">';

    // Display all cabinets from database
    query_all_cabinets();
    echo'</div>
    </div>';

    ?>

私のメインコンテンツエリア

<?php

    ini_set('display_errors', 1);

    echo '<div class="main">';

    echo'
    <br>
    <br>
    Some data can go here
    <br>
    <br><br>
    <br>
    and here
    <br>
    <br>
    and here
    <br>
    <br>
    Some data can go here
    <br>
    <br><br>
    <br>
    and here
    <br>
    <br>
    and here
    <br>
    <br>
    Some data can go here
    <br>
    <br><br>
    <br>
    and here
    <br>
    <br>
    and here
    <br>
    <br>
    Some data can go here
    <br>
    <br><br>
    <br>
    and here
    <br>
    <br>
    and here';
    ?>

私の.cssファイル

.sidebar {
    width:200px;
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    background-color:#54524F;
    /*overflow-y: scroll;*/
}
.main {
    width: auto;
    margin-left: 200px;
}
.heading {
    margin: 1px;
    color: #fff;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    background-color:#000000;
}
.content {
    padding: 5px 10px;
}
#submit {
    width:185px;
    background-color: black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family:'Oswald';
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}
#submit:hover {
    border: none;
    background:#FF9933;
    box-shadow: 0px 0px 1px #777;
}
tr:nth-of-type(odd) {
    background-color:#D4D4D4;
}
.container0 {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 30px;
    background-color:black;
}

JSFiddle

4

1 に答える 1

0

CSS で、次のように、サイドバーの位置を相対に設定し、フロートを左に設定します。

.sidebar {
    width:200px;
    position:relative;
    top:0px;
    left:0px;
    height:100%;
    background-color:#54524F;
    float:left
}

jsfiddle の更新バージョンで、それが機能することを示します:) http://jsfiddle.net/BrJDE/3/

ページの横にスクロールバーを配置したくないので、さらにいくつかの例を作成しました。それらがあなたが望むものであるかどうか教えてください。そうでない場合は、またお手伝いしたいと思います。

これらの例は両方とも、提供したコンテンツと比較して 2 つの追加の div を使用しています。これらにより、ブラウザの横ではなく、これらの div 内にスクロールバーを配置できるようになります。私が行った変更について説明する必要がある場合は、教えてください。

ページ内のスクロールバー: http://jsfiddle.net/BrJDE/6/

スクロール div の左側にあるページ内のスクロールバー: http://jsfiddle.net/BrJDE/5/

于 2013-09-06T14:40:18.057 に答える