我对divs和css相当陌生，所以请温和:)我在一个比屏幕宽的div 中有一个网格视图，而不是外部div 扩展以适应它，它爆发了。如果我在外部div 上放溢出，我会得到一个滚动条，但我不想在div 中使用滚动条，我想允许用户使用浏览器 scollbar 滚动。这是我的代码，任何帮助将不胜感激。谢谢
#page
{
background-color:#EEEEEE;
vertical-align:middle;
text-align:center;
margin:5px 5px 5px 5px;
overflow:auto;
}
#OuterDiv
{
border:solid 1px #000000;
background-color:#ffffff;
}
#ContentDiv
{
padding:5px 5px 5px 5px;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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></title>
<link href="~/Styles/stylesheet1.css" rel="stylesheet" type="text/css" />
</head>
<body id="page">
<form id="Form1" method="post" runat="server">
<div id="OuterDiv">
<div id="ContentDiv">
<!-- <asp:Image ID="Image1" runat="server" ImageUrl="~/downArrow.gif" Width="2500px" Height="5px" />-->
<asp:GridView ID="GridView" runat="server" AutoGenerateColumns="False"
DataKeyNames="PID" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="PID" HeaderText="Property_ID"
ReadOnly="True" />
<asp:BoundField DataField="Client_ID" HeaderText="Client_ID" />
<asp:BoundField DataField="aID" HeaderText="aID" />
<asp:BoundField DataField="Type_ID" HeaderText="Type_ID" />
<asp:BoundField DataField="Status_ID" HeaderText="Status_ID" />
<asp:BoundField DataField="Condition_ID" />
<asp:BoundField DataField="Quality_Check" HeaderText="Quality_Check" />
<asp:BoundField DataField="Letter_ID" HeaderText="Letter_ID" />
<asp:CheckBoxField DataField="Access" HeaderText="Access" />
<asp:BoundField DataField="Strike" HeaderText="Strike" />
<asp:BoundField DataField="No" HeaderText="No" />
<asp:BoundField DataField="Built" HeaderText="Built" />
<asp:CheckBoxField DataField="Resend" HeaderText="Resend" />
<asp:BoundField DataField="Revisit" HeaderText="Revisit" />
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
查看源...
<!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><title>
</title><link href="Styles/stylesheet1.css" rel="stylesheet" type="text/css" /></head>
<body id="page">
<form method="post" action="WebForm1.aspx" id="Form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="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" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="qZYIU/6LTVycyZg1nqgPf4PbztGHnGb9E+xlV5NDyZ3cqihuPsgLkGWcAzTeRY10hUK3zDCNWEpQi2JdzOyDt39AjxvqUvbs7YoY5ckwVtJAPZVp2X6S1akdqvI4KIGb0hIt5ieX8iPX60SCD9VGvhOPgp3KbqQB22aGkEzjeUK9pI1Z2dsUeO/uNr38hIVSLvmiWInqePwmo0DUISlKva53o51aiVTkQ+lcausxMZBGLUexClrLM3WvV44wNC9z" />
</div>
<div id="OuterDiv">
<div id="ContentDiv">
<div>
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tr>
<th scope="col">Property_ID</th><th scope="col">Client_ID</th><th scope="col">aID</th><th scope="col">Type_ID</th><th scope="col">Status_ID</th><th scope="col">Condition_ID</th><th scope="col">Quality_Check</th><th scope="col">Letter_ID</th><th scope="col">Access</th><th scope="col">Strike</th><th scope="col">No</th><th scope="col">Built</th><th scope="col">Resend</th><th scope="col">Revisit</th>
</tr><tr>
<td>22</td><td>1</td><td>24</td><td>10</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_0" type="checkbox" name="GridView1$ctl02$ctl00" disabled="disabled" /></span></td><td>0</td><td>3</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_0" type="checkbox" name="GridView1$ctl02$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>23</td><td>1</td><td>24</td><td>10</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_1" type="checkbox" name="GridView1$ctl03$ctl00" disabled="disabled" /></span></td><td>0</td><td>3</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_1" type="checkbox" name="GridView1$ctl03$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>24</td><td>1</td><td>24</td><td>10</td><td>21</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_2" type="checkbox" name="GridView1$ctl04$ctl00" disabled="disabled" /></span></td><td>0</td><td>2</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_2" type="checkbox" name="GridView1$ctl04$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>25</td><td>1</td><td>24</td><td>10</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_3" type="checkbox" name="GridView1$ctl05$ctl00" disabled="disabled" /></span></td><td>0</td><td>2</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_3" type="checkbox" name="GridView1$ctl05$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>26</td><td>1</td><td>24</td><td>10</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_4" type="checkbox" name="GridView1$ctl06$ctl00" disabled="disabled" /></span></td><td>0</td><td>3</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_4" type="checkbox" name="GridView1$ctl06$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>27</td><td>1</td><td>24</td><td>38</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_5" type="checkbox" name="GridView1$ctl07$ctl00" disabled="disabled" /></span></td><td>0</td><td>2</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_5" type="checkbox" name="GridView1$ctl07$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>28</td><td>1</td><td>24</td><td>10</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_6" type="checkbox" name="GridView1$ctl08$ctl00" disabled="disabled" /></span></td><td>0</td><td>3</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_6" type="checkbox" name="GridView1$ctl08$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>29</td><td>1</td><td>24</td><td>10</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_7" type="checkbox" name="GridView1$ctl09$ctl00" disabled="disabled" /></span></td><td>0</td><td>3</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_7" type="checkbox" name="GridView1$ctl09$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>30</td><td>1</td><td>24</td><td>10</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_8" type="checkbox" name="GridView1$ctl10$ctl00" disabled="disabled" /></span></td><td>0</td><td>2</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_8" type="checkbox" name="GridView1$ctl10$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr><tr>
<td>31</td><td>1</td><td>24</td><td>10</td><td>1</td><td>0</td><td> </td><td>0</td><td><span class="aspNetDisabled"><input id="GridView1_ctl00_9" type="checkbox" name="GridView1$ctl11$ctl00" disabled="disabled" /></span></td><td>0</td><td>2</td><td> </td><td><span class="aspNetDisabled"><input id="GridView1_ctl01_9" type="checkbox" name="GridView1$ctl11$ctl01" disabled="disabled" /></span></td><td>0</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
尝试从 gridview 的父div 中删除任何溢出属性，并将其添加到您的 CSS 中
body{ overflow:auto; }
删除了外部div 并将其属性放入内容div。添加了显示：表;到ContentDiv，
这是一个JSFiddle，我想它正在按预期工作。