位置：固定使div跳出页面答案

【问题标题】：Position: Fixed makes div go out of page位置：固定使div跳出页面
【发布时间】：2016-03-30 20:43:13
【问题描述】：

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

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

【问题讨论】：

你说你删除了 width:100%;来自您的 .wide 班级并担任职位：固定/绝对正确：0；它仍然给出相同的结果？因为它似乎对我来说很好。这是你的宽度：100% 这样做。
当我把它放在右边：0时，它占据了整个页面，我希望它占据剩余空间。

标签： html css asp.net css-position

【解决方案1】：

right: 0 只是将固定元素向右对齐，但是它仍然是宽 ID 的全宽，这使得它占据了整个页面。是{宽度：自动；右：0； } 一个选项？听起来它会做你想做的事

【讨论】：