如何获得div的滚动条 [英] how to get scrollbar for div
本文介绍了如何获得div的滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果我展开树形视图菜单项，整个网页会快速扩展到范围之外，而不是单独扩展菜单项。如何仅为菜单项创建滚动条以及如何停止网页超出范围。任何人请指导我。
以下是代码。
If i expand my tree view menu item whole web page merrily extends out of the range rather than expanding menu item alone. How to make Scroll bar only for menu item and how to stop web page extends out of the range. Any one please guide me.
Below are the code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HomePage_New.aspx.cs" Inherits="HomePage_New" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script type="text/javascript" src="Script/jquery_min.js"></script>
<style type="text/css">
body, html, form
{
margin: 0;
padding: 0;
color: #000;
background-color: #FFF;
font-family: Trebuchet MS,Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
height: 100%;
}
body
{
border: 1px solid #000;
}
.header
{
background-color: #047391;
width: 100%;
height: 35px;
color: #FFF;
font-weight: bold;
}
.header .lefttext
{
float: left;
text-align: center;
font-size: 95%;
margin: 5px 0 5px 5px;
}
.header .righttext
{
float: right;
text-align: center;
font-size: 75%;
display: inline;
margin: 6px 0 5px 0;
}
.righttext a
{
display: inline;
color: #FFF;
margin-right: 10px;
}
.righttext div
{
display: inline;
}
.quote
{
width: 100%;
background-color: #EEE;
color: #000;
font-size: 70%;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
border-bottom: 1px solid #000;
text-align: right;
}
table#main
{
height: 91%;
vertical-align: top;
width: 100%;
border-bottom: 1px solid #000;
}
table#main td
{
vertical-align: top;
}
td.leftnav
{
background-color: #047391;
width: 250px;
border-right: 1px solid #000;
padding: 0px;
color: #FFF;
font-size: 80%;
text-align: center;
}
td.leftnav div.leftnavheader
{
background-color: #047391;
color: #FFF;
padding: 3px;
border-bottom: 3px solid #A9A9A9;
font-size: 100%;
font-weight: bold;
text-align: left;
}
td.leftnav div.menu
{
padding-top: 5px;
overflow: auto;
}
td.content
{
width: auto;
padding: 0px 5px 5px 5px;
font-size: 85%;
}
td.content div.title
{
background-color: #047391;
color: #fff;
border: none;
font-size: 100%;
font-weight: bold;
margin-top: 5px;
padding: 5px 0 5px 0;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<div class="lefttext">
Welcome to ATM Claims & EJARS(EJ Archival and Retrieval System)</div>
<div class="righttext">
<div>
<img id="bullethome" src="images/pixel.gif" alt="" />
<div style="vertical-align: top;">
<a href="">Home</a>
</div>
</div>
<div>
<img id="bulletmyprofile" src="images/pixel.gif" alt="" />
<div style="vertical-align: top;">
<a href="">My profile</a>
</div>
</div>
<div>
<img id="bulletchangepwd" src="images/pixel.gif" alt="" />
<div style="vertical-align: top;">
<a href="">Change password</a>
</div>
</div>
<div>
<img id="bulletlogout" src="images/pixel.gif" alt="" />
<div style="vertical-align: top;">
<a href="">Logout</a>
</div>
</div>
</div>
</div>
<div class="quote">
<marquee>Welcome To EJARS ATM Claims</marquee>
</div>
<table cellspacing="0" id="main">
<tr>
<td class="leftnav">
<div class="leftnavheader">
Menu</div>
<div class="menu">
<div>
<asp:TreeView ID="TreeView2" runat="server" ImageSet="Arrows" ForeColor="white">
<Nodes>
<asp:TreeNode Value="Parent1" Expanded="False" Text="EJ Archive" SelectAction="Expand">
<asp:TreeNode Value="Parent1" Expanded="False" Text="2013" SelectAction="Expand">
<asp:TreeNode Value="Child1A" Text="Search N View" NavigateUrl="~/CreateAccount.aspx" Target="MainView" />
<asp:TreeNode Value="Child1B" Text="Archival summary" />
</asp:TreeNode>
<asp:TreeNode Value="Parent2" Expanded="False" Text="2012" SelectAction="Expand">
<asp:TreeNode Value="Child2A" Text="Search N View" />
<asp:TreeNode Value="Child2B" Text="Archival summary" />
</asp:TreeNode>
<asp:TreeNode Value="Parent3" Expanded="False" Text="2011" SelectAction="Expand">
<asp:TreeNode Value="Child3A" Text="Search N View" />
<asp:TreeNode Value="Child3B" Text="Archival summary" />
</asp:TreeNode>
<asp:TreeNode Value="Parent3" Expanded="False" Text="2010" SelectAction="Expand">
<asp:TreeNode Value="Child3A" Text="Search N View" />
<asp:TreeNode Value="Child3B" Text="Archival summary" />
</asp:TreeNode>
<asp:TreeNode Value="Parent3" Expanded="False" Text="2009" SelectAction="Expand">
<asp:TreeNode Value="Child3A" Text="Search N View" />
<asp:TreeNode Value="Child3B" Text="Archival summary" />
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Value="Parent1" Expanded="False" Text="Customer Claims" SelectAction="Expand">
<asp:TreeNode Value="Parent1" Expanded="False" Text="Claims - Admin" SelectAction="Expand">
<asp:TreeNode Value="Child1A" Text="Chargeback comparison" />
<asp:TreeNode Value="Child1A" Text="Claimbox - Admin" />
</asp:TreeNode>
<asp:TreeNode Value="Child2A" Text="Create new claim" />
<asp:TreeNode Value="Child2B" Text="Pending claim info" />
<asp:TreeNode Value="Child3A" Text="Claims summary" />
<asp:TreeNode Value="Child3B" Text="Chargeback summary" />
<asp:TreeNode Value="Child3C" Text="KIV EJ Claims" />
</asp:TreeNode>
<asp:TreeNode Value="Parent1" Expanded="False" Text="Organization Chart" SelectAction="Expand">
<asp:TreeNode Value="Child1A" Text="Business unit types" />
<asp:TreeNode Value="Child1A" Text="Business units" />
<asp:TreeNode Value="Child1A" Text="Business unit staff" />
</asp:TreeNode>
<asp:TreeNode Value="Parent1" Expanded="False" Text="File Generations" SelectAction="Expand">
<asp:TreeNode Value="Child1A" Text="EOD file generation" />
<asp:TreeNode Value="Child1A" Text="Automated reports" />
</asp:TreeNode>
<asp:TreeNode Value="Parent1" Expanded="False" Text="Reports" SelectAction="Expand">
<asp:TreeNode Value="Child1A" Text="Daily claim status info" />
<asp:TreeNode Value="Child1A" Text="Claims overall summary" />
<asp:TreeNode Value="Child1A" Text="On-Us claims" />
<asp:TreeNode Value="Child1A" Text="CapturedCard details" />
<asp:TreeNode Value="Child1A" Text="CapturedCardOverall Summary" />
</asp:TreeNode>
<asp:TreeNode Value="Parent1" Expanded="False" Text="User Management" SelectAction="Expand">
<asp:TreeNode Value="Child1A" Text="User Summary" />
<asp:TreeNode Value="Child1A" Text="Create User" />
<asp:TreeNode Value="Child1A" Text="Modify User" />
<asp:TreeNode Value="Child1A" Text="Delete User" />
<asp:TreeNode Value="Child1A" Text="Modify Bank List" />
</asp:TreeNode>
</Nodes>
<HoverNodeStyle Font-Underline="True" />
</asp:TreeView>
</div>
</div>
</td>
<td class="content">
<div class="title">
Welcome page
</div>
<br />
<div id="MainView">
<center>
<img id="WelcomePage_img" src="images/Home_Page_Corp_Bank_Logo.jpg" alt="" /></center>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>推荐答案
You are not even trying to make any<div>scrollable. You can do it in CSS, but it would not make the element’’s content scrollable if it fits in the<div>, so you also need to limits its vertical size.
Consider this sample:
HTML:
You are not even trying to make any<div>scrollable. You can do it in CSS, but it would not make the element''s content scrollable if it fits in the<div>, so you also need to limits its vertical size.
Consider this sample:
HTML:
<div id="sidebar">
<div id="scroller">
<p>Scrollable content:</p>
<p>Some line...</p>
<!-- add some 100 more lines like that -->
</div>
</div>
with this CSS:
with this CSS:
#sidebar{
width: 200px;
height: 300px;
}
#sidebar #scroller{
width: 215px;
height: 300px;
padding-bottom: 15px;
overflow: scroll;
}
you can use overflow as auto or scroll in div
you can use overflow as auto or scroll in div
这篇关于如何获得div的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
