[英]One scroll bar for 2 separate divs
我有兩個並排的DIV。 一個div是我的側邊欄(屏幕左側),另一個div是我的主要內容(屏幕右側)。
我正在尋找的是:我想要的是屏幕最右邊的一個可見滾動條。 我希望該滾動條向左和向右滾動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;
}
在您的CSS中,將側邊欄的位置設置為相對,並將float設置為左側,如下所示:
.sidebar {
width:200px;
position:relative;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
float:left
}
jsfiddle的更新版本,以向您展示它的工作原理:) http://jsfiddle.net/BrJDE/3/
因為您不想在頁面的側面放置滾動條,所以我為您提供了更多示例。 告訴我他們是否是您想要的,如果不是,我想再次幫助您。
與您提供的內容相比,這兩個示例都使用了兩個額外的div。 這些將使您可以將滾動條放置在這些div的內部,而不是在瀏覽器的側面。 如果您需要我解釋所做的更改,請告訴我。
頁面內的滾動條: http : //jsfiddle.net/BrJDE/6/
滾動div左側頁面內的滾動條: http : //jsfiddle.net/BrJDE/5/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.