Позиция: Исправлено, что div уходит с страницы

Проблема в том, что мои ASP-элементы управления выходят за границы в правой части экрана при использовании класса .Fixed из моего CSS. Я попробовал 'right: 0; вещь, но не повезло ...Позиция: Исправлено, что div уходит с страницы

См. this image.

CSS:

#parent { 
    display: inline-flex; 
} 

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

#wide { 
    width: 100%; 
} 

.FullWidth { 
    width:100%; 
} 

.Fixed { 
position: fixed; 
}

Short 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

источник

2016-03-30 Hypenate

Вы говорите, что вы удалили ширину: 100%; от вашего общего класса и занимал позицию: фиксированное/абсолютное право: 0; и он по-прежнему дает тот же результат? Потому что, похоже, он отлично работает для меня. Это ваша ширина: 100%, что делает это. –

Когда я помещаю его справа: 0, он занимает всю страницу, я хочу, чтобы он занял оставшееся пространство. – Hypenate

право: 0 просто совместив неподвижная Elemen t вправо, однако он по-прежнему является полной шириной от широкого идентификатора, что заставляет его заняться всей страницей. {Width: auto; право: 0; } опция? Похоже, что он сделает то, что вы хотите,

источник

2016-03-30 20:53:28 Requisit

Позиция: Исправлено, что div уходит с страницы

ответ

Смежные вопросы