Margin-top ou Padding-top não respeita height do elemento pai

luizantoniofyc · Outubro 2, 2014

Prezados, não estou conseguindo aplicar margin-top ou padding-top nos elementos filhos de acordo com o tamanho do pai. Segundo o que pesquisei, quando aplicamos porcentagem em um elemento, este é aplicado ao controle de acordo com o que fora definido para o primeiro pai do elemento, mas isso não está acontecendo. Abaixo vou publicar tanto o meu html quanto o meu CSS, a fim de que possam me ajudar.
Dentro da minha div footer tenho uma div chamada footer_message, cuja qual contém uma label. Gostaria de centralizá-la verticalmente e, para tanto, preciso que o margin-top seja aplicado em relação ao tamanho do elemento pai, ou seja, em relação à div footer, mas isso não acontece. Reparem que estou aplicando apenas 2% de padding-top na div footer_message, o que já leva a entender que ele o valor não está sendo aplicado em relação ao tamanho da div footer. O que pode estar acontecendo?

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%">
<head runat="server">
    <title>Framework Beta</title>
    <link href="../Content/MasterPage.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body oncontextmenu="return false">
    <form runat="server">
        <div id="header">
            <div id="header_sut">
                <asp:Label ID="lblSUT" runat="server" Font-Bold="True" Text=""></asp:Label>
            </div>
            <div id="header_guest">
                Olá Visitante, &nbsp;
                <asp:LinkButton ID="libSair" runat="server" CssClass="linkbutton" OnClick="libSair_Click">Sair</asp:LinkButton>
            </div>
        </div>
        <div id="left">
            <div id="left_button">
                <asp:Button ID="btnIncluir" runat="server" CssClass="botao_incluir" Text="Incluir" OnClick="btnIncluir_Click" />
            </div>
            <div id="update_panel" runat="server"
                onmouseup="HideMenu('contextMenu');"
                oncontextmenu="ShowMenu('contextMenu',event);"
                class="detailItem">
                <div style="display: none;" id="contextMenu">
                    <table style="cursor: default;"
                        border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <div>
                                    <asp:Button ID="btnDesfazerSelecao" CssClass="botao_context_item" runat="server" Text="Desfazer seleção..." OnClick="btnDesfazerSelecao_Click" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel" runat="server">
                    <ContentTemplate>
                        <div id="conteudo_arvore" runat="server">
                            <asp:Panel ID="panel_arvore" runat="server" ScrollBars="Auto">
                                <div id="arvore">
                                    <asp:TreeView ID="tvwCadastro" runat="server" ExpandDepth="0" OnSelectedNodeChanged="tvwCadastro_SelectedNodeChanged" Height="50%"
                                        ImageSet="Msdn" NodeIndent="5" Font-Size="Large" PopulateNodesFromClient="true" OnTreeNodePopulate="tvwCadastro_TreeNodePopulate" populateondemand="true">
                                        <Nodes>
                                        </Nodes>
                                        <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
                                            HorizontalPadding="5px" NodeSpacing="1px" VerticalPadding="2px" />
                                        <ParentNodeStyle Font-Bold="False" />
                                        <SelectedNodeStyle BackColor="White" HorizontalPadding="3px" VerticalPadding="1px" Font-Bold="true" />
                                    </asp:TreeView>
                                </div>
                            </asp:Panel>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
        <div id="right">
            <asp:Panel ID="pnlRight" runat="server" ScrollBars="Auto">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server">
                </asp:ContentPlaceHolder>
            </asp:Panel>
        </div>
        <div id="footer">
            <div id="footer_message">
                <asp:Label ID="lblFooter" runat="server" Text="Qualquer mensagem!"></asp:Label>
            </div>
        </div>
    </form>
</body>
</html>

css:

html, body, form {
    margin: 0;
    height: 100%;
}
div {
    border-radius: 5px;
}
#header {
    width: 98%;
    height: 10%;
    margin: 1% auto 1% 1%;
    background-color: #1874CD;
}
#left {
    width: 28%;
    height: 72%;
    /*min-height: 520px;*/
    background-color: #1874CD;
    float: left;
    margin-left: 1%;
    margin-bottom: 1%;
}
#right {
    width: 69%;
    height: 72%;
    background-color: white;
    float: right;
    margin-right: 1%;
    /*min-height: 520px;
    max-height: 520px;*/
    overflow: auto;
    margin-bottom: 1%;
}
#footer {
    clear: both;
    width: 98%;
    height: 10%;
    margin: 1% auto auto 1%;
    background-color: #1874CD; 
}
#header_sut {
    float: left;
    margin-left: 1%;
    margin-top: 2%;
    font-size: medium;
    color: white;
}
#header_guest {
    float: right;
    margin-right: 1%;
    margin-top: 0.5%;
    height: 100%;
    color: white;
}
.label_inicio {
    
}
#left_button {
    width: 60%;
    height: 5%;
    margin: 7% auto auto auto;
}
#update_panel {
    width: 83%;
    height: 79%;
    margin: 7% auto 7% auto;
    min-height: 79%;
    max-height: 79%;
    background-color: White;
}
#conteudo_arvore {
    width: 100%;
    overflow: auto;
}
#panel_arvore {
    min-height: 400px;
    max-height: 400px;
}
#arvore {

}
#context_item {
    border: none;
    width: 100px;
    background-color: #1874CD;
}
.botao_context_item {
    border-radius: 5px;
    background-color: #1874CD;
    color: white;
}
.botao_incluir {
    width: 100%;
}
.botao_incluir:hover {
    color: black;
    background-color: white;
    cursor: pointer;
}
.linkbutton {
    color: skyblue;
}
.linkbutton:hover {
    color: white;
}
#footer_message {
    width: 100%;
    text-align: center;
    color: white;
    padding-top: 2%;
}

Entrar

Margin-top ou Padding-top não respeita height do elemento pai

Pergunta

luizantoniofyc

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades