位置:固定使得div离开页面

时间:2016-03-30 20:43:13

标签: html css asp.net css-position

问题是当我使用CSS中的.Fixed类时,我的ASP控件超出了屏幕右侧的范围。 我试过' right: 0;事情,但没有运气...

请参阅this image

CSS:

<div id="parent">
  <div id="narrow">
    Contains left gridview
  </div>
  <div id="parent">
    <div id="narrow">
      Gridview
    </div>
    <div id="wide" class="Fixed">
      <div>
        FormView
      </div>
      <div>
        Contains label and textbox
      </div>
    </div>
    <br />
    <div>
      Contains right gridview
    </div>
    <hr />
    <div>
      Contain textbox and button
    </div>
  </div>
</div>

简短的HTML(在asp.net中)

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Security.Master" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="Reports_Read.aspx.cs" Inherits="SecurityV3_Web.ContentPages.Reports.Reports_Read" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="parent">
                <div id="narrow">
                    <asp:GridView ID="grdReports" runat="server" DataKeyNames="ReportID" AutoGenerateColumns="false" OnRowDataBound="grdReports_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
                        <Columns>
                            <asp:BoundField HeaderText="ID" DataField="ReportID" ItemStyle-Width="40px" />
                            <asp:BoundField HeaderText="Time" DataField="Time" ItemStyle-Width="40px" />
                            <asp:BoundField HeaderText="Agent" DataField="Name" />
                            <asp:BoundField HeaderText="Location" DataField="Location" />
                            <asp:BoundField HeaderText="Header" DataField="Heading" />
                        </Columns>
                    </asp:GridView>
                </div>
                    <div id="wide" class="Fixed">
                        <div>
                            <asp:FormView ID="FormView1" runat="server" CssClass="FullWidth">
                                <EmptyDataTemplate>
                                    <p>No data to show. Select a report.</p>
                                </EmptyDataTemplate>
                                <ItemTemplate>
                                    <div>
                                        <asp:Label ID="Label1" runat="server" Text="Heading"></asp:Label>
                                        <asp:TextBox ID="txtHeading" runat="server" Text='<%# Eval("Heading") %>'></asp:TextBox>
                                    </div>
                                    <div>
                                        <asp:Label ID="Label2" runat="server" Text="Report"></asp:Label><br />
                                        <asp:TextBox ID="txtReport" runat="server" Text='<%# Eval("Report1") %>' Height="200px" CssClass="FullWidth" TextMode="MultiLine"></asp:TextBox>
                                    </div>
                                </ItemTemplate>
                            </asp:FormView>
                        </div>
                        <br />
                        <div>
                            <asp:GridView ID="grdReplies" runat="server" DataKeyNames="ReportReplyID" AutoGenerateColumns="false">
                                <Columns>
                                    <asp:BoundField HeaderText="ID" DataField="ReportReplyID" ItemStyle-Width="40px" />
                                    <asp:BoundField HeaderText="Time" DataField="Time" ItemStyle-Width="40px" />
                                    <asp:BoundField HeaderText="Agent" DataField="Name" ItemStyle-Width="100px" />
                                    <asp:BoundField HeaderText="Reply" DataField="Reply1" />
                                </Columns>
                            </asp:GridView>
                        </div>
                        <hr />
                        <div>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="This field is required" CssClass="Foutmelding" ControlToValidate="txtReply"></asp:RequiredFieldValidator>
                            <asp:TextBox ID="txtReply" runat="server" TextMode="MultiLine"></asp:TextBox>
                            <br />
                            <asp:Button ID="btnSaveReply" runat="server" Text="Reply" OnClick="btnSaveReply_Click" />
                        </div>
                    </div>
                </div>

        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

完整的HTML

{{1}}

Fiddle

1 个答案:

答案 0 :(得分:0)

右:0只是将固定元素对齐到右边,但它仍然是宽ID的全宽,这使得它占据了整个页面。是{width:auto;右:0; } 一个选项?听起来它会像你想要的那样做到