Position: Fixed macht div gehen aus Seite

Question

Das Problem ist, dass meine ASP-Steuerelemente außerhalb der Grenzen auf der rechten Seite des Bildschirms gehen, wenn Sie die .Fixed-Klasse von meinem CSS verwenden. Ich versuchte die 'right: 0; Sache, aber kein Glück ...

Siehe this image.

CSS:

#parent { 
    display: inline-flex; 
} 

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

#wide { 
    width: 100%; 
} 

.FullWidth { 
    width:100%; 
} 

.Fixed { 
position: fixed; 
} 

Short HTML (in 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> 

komplette 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

Answer 1

rechts: 0 ausrichtet nur die feste elemen t nach rechts, aber es ist immer noch die volle Breite von der breiten ID, die es die ganze Seite einnehmen lässt. Ist {width: auto; rechts: 0; } eine Option? Das klingt wie es tun würde, was Sie wollen