一个滚动条用于 2 个单独的 div

Question

我有两个并排的 DIV。一个div是我的侧边栏（屏幕左侧），另一个div是我的主要内容（屏幕右侧）。

我在寻找什么：我想要的是屏幕最右侧的一个可见滚动条。我希望那个 scrol 栏同时向左和向右滚动div。

我的问题：目前我的左侧边栏有一个树形菜单。当我展开树菜单时，我没有滚动条可以向下滚动展开的侧边栏内容。我可以在侧边栏添加一个滚动条，但这看起来很丑陋。我只想要最右侧的 1 个滚动条来处理两个div。
有人可以帮助我吗？

我的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

Answer 1

在 CSS 中，将侧边栏的位置设置为相对并将 float 设置为左，如下所示：

.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/