css - gridview 跳出容器 div

标签 css html gridview breakout

我对 div 和 css 还很陌生，所以请保持温和:) 我在 div 中有一个 gridview，它比屏幕更宽，而不是扩展外部 div 以容纳它，它会爆发。如果我将 overflow 放在外部 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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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 中删除任何 overflow 属性并将其添加到您的 css

body{ overflow:auto; }

移除了外层的 div 并将它的属性放到了 contentdiv 中。 向 ContentDiv 添加了display: table;，

这是一个JSFiddle ，我想它正在按预期工作。

关于css - gridview 跳出容器 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13425993/

上一篇：css - 可点击区域扩展为容器(图片)

下一篇：css - 表格布局和 CSS

相关文章：

javascript - 准确设置文本位置

php - 动画光标在我的网络应用程序中不起作用

html - float 布局中的 CSS 缩放 div

asp.net - ASP GridView 编辑模式下的所有行

android - 带有 GridView 的 PopupWindow - 展开 View 时出现问题

php - 为 Iframe 内的图像设置放大/缩小

html - 居中文件输入表单 - html/bootstrap/angular

css - Bootstrap : Empty spaces on layout due text size

c# - 获取 ASP.NET GridView 单元格值并在 JQuery 进度条中显示

javascript - 应用 'K method' 在 jQuery 中制作自定义滚动条

©2024 IT工具网  联系我们