html - 位置:固定会使div跳出页面

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

请参见this image。

CSS：

#parent {
    display: inline-flex;
}

#narrow {
    width: 1000px;
    margin-right: 20px;
}

#wide {
    width: 100%;
}

.FullWidth {
    width:100%;
}

.Fixed {
position: fixed;
}

短HTML（在asp.net中）

<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

<%@ 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>

Fiddle

最佳答案

右：0只是将固定元素向右对齐，但是它仍然是宽ID的全宽，这使其占据了整个页面。是{width：auto;正确：0； } 一个选项？听起来像它会做您想要的