html - 未最大化屏幕时布局损坏

Question

当我的 IE 屏幕最大化时，我的布局工作正常，如下所示:

但是，当它没有最大化时，我得到了这个:

我的问题是，当我的屏幕尺寸发生变化时，如何调整组件的大小(变得更小)？

这是我的页面代码:

<asp:Panel ID="pnl_principal" runat="server" Width="100%">

    <asp:Timer ID="TimerPnlGridOcorrencias" runat="server" OnTick="TimerPnlGridOcorrencias_Tick"></asp:Timer>

    <asp:Panel ID="pnlVisaoDetalhada" runat="server" BackColor="#284e98" Width="100%">
        <asp:Label ID="lblVisaoDetalhada" runat="server" Text="Visão Detalhada" Height="30px" ForeColor="White"
            Style="font-family: Verdana; height: 30px; background-color: #284e98; font-size: 12pt; font-variant: small-caps" />
    </asp:Panel>

    <asp:Panel ID="pnl_ultimaAtualizacao" runat="server" HorizontalAlign="Justify" Width="100%"
        Style="display: inline; font-size: 10pt; font-family: Verdana; margin: 0.5em 0.5em 0em 0.5em;">

        <div style="float: left">

            <div id="dvExibeFiltros" style="float: left">
                <asp:CheckBox ID="chkExibeFiltros" Checked="true" runat="server" Text="Mostrar Filtros"
                    Style="display: block; margin: 0em 0.5em 0em 0.5em; text-align: left; float: left" />
            </div>

            <div id="dvParametrosBusca" style="margin: 0.12em 0.5em 0em 0.5em; display: block">
                <asp:Label ID="lblUltimaAtualizacao" runat="server" Text="Última Atualização: {0}"
                    Style="font-family: Verdana; font-size: 8pt; float: right; margin: 0.1em 0.5em 0.5em 0.5em;" />

                <asp:Label ID="lblParametersBusca" runat="server" Visible="false" Text=""
                    Style="margin: 0.12em 0.5em 0.5em 0.5em; display: inline; text-align: left; float: left" />
            </div>

        </div>
    </asp:Panel>

    <br />
    <br />

    <div id="dvPrincipal" style="font-family: Verdana; zoom: 1; display: block; border: 1px solid #000000;">

        <div style="display: inline">
            <div style="margin: 0.5em 0.5em 0.5em 0.5em; font-family: Verdana; font-size: 10pt; float: left">

                <div style="font-family: Verdana; font-size: 10pt; text-align: left; margin: 0.5em 0.5em 0.5em 0em;">
                    <asp:Label ID="lblTransportadora" runat="server" Text="Transportadora: " />

                    <asp:DropDownList ID="ddlTransportadora" Width="330px" runat="server"
                        Style="font-family: Verdana; font-size: 10pt;" />
                </div>

                <div style="font-family: Verdana; font-size: 10pt; text-align: left; margin: 0.5em 0.5em 0.5em 0em;">
                    <asp:Label ID="lblPlaca" runat="server" Text="Placa: " />
                    <asp:TextBox ID="txtPlaca" runat="server" MaxLength="7" Width="92px" />

                    <asp:Label ID="lblTempoAtualizacao" runat="server" Text="Tempo de atualização: "
                        Width="16%" />
                    <asp:DropDownList ID="ddlTempoAtualizacao" Width="143" runat="server" Enabled="true" />

                </div>
            </div>
        </div>

        <div style="display: inline; margin: 0.5em 0.5em 0.5em 0.5em;">
            <div style="font-family: Verdana; font-size: 10pt; display: inline; margin: 0.5em 0.5em 0.5em 0.5em; float: right;">

                <%-- margin: top right bottom left --%>
                <div id="lstBoxOut" style="margin: 0.5em 0.3em 0.5em 0em; display: inline;">
                    <div style="font-size: 10pt; display: inline-block;">
                        <asp:Label ID="lblOcorrencias" runat="server" Text="Ocorrências: "
                            Style="font-size: 10pt; display: inline;"></asp:Label>

                        <div style="font-size: 10pt; display: inline;">
                            <apisul:ApisulListBox ID="listBoxOcorrencias" SelectionMode="Multiple" runat="server"
                                ExibeItemTodos="true" UtilizaBsmSelect="true" Width="400px"
                                Style="font-size: 10pt;">
                            </apisul:ApisulListBox>
                        </div>

                        <asp:TextBox ID="hidTiposOcorrencias" runat="server" style="display:none"></asp:TextBox>
                    </div>
                </div>

                <div style="margin: 0.5em 0.5em 0.5em 0.5em; float: right; font-family: Verdana; font-size: 10pt;">
                    <asp:Button ID="btnPesquisar" runat="server" Text="Pesquisar" Width="130px" OnClick="btnPesquisar_Click" />
                </div>
            </div>

        </div>
    </div>

    <br />

    <asp:Panel ID="pnlGridOcorrencias" runat="server">
        <asp:GridView ID="gridOcorrencias" runat="server"
            OnPageIndexChanging="gridOcorrencias_PageIndexChanging"
            AlternatingRowStyle-BackColor="#E4E4E4" HeaderStyle-ForeColor="White" HeaderStyle-Font-Bold="false"
            HeaderStyle-Font-Names="Verdana" HeaderStyle-Font-Size="10pt" HeaderStyle-BorderColor="White"
            HeaderStyle-BackColor="Gray" AutoGenerateColumns="true" BorderColor="White" EditRowStyle-BorderColor="White"
            RowStyle-BorderColor="White" AlternatingRowStyle-BorderColor="White" BorderStyle="None"
            AllowPaging="true" PageSize="10" Style="font-family: Verdana; font-size: 10pt" />
    </asp:Panel>

</asp:Panel>

Answer 1

在

<asp:Panel ID="pnl_principal" runat="server" Width="100%">

您必须设置 px 值，例如 900px，或者您必须设置所有值的宽度百分比

<asp:Panel ID="pnl_principal" runat="server" Width="900px">