none
Layout com RenderBody dinamico RRS feed

  • Pergunta

  • Olá,

    estou tentando fazer um layout com o rodapé fique no final da página.
    As Views das minhas ActionResult, podem ter um Html.RenderPartial, porém quando é adicionado isto, a div de conteudo não respeita e não altera o tamanho.

    O interessante que o conteudo do rodapé segue o padrão e vai junto com o resto do texto, porém a div com do rodapé não.

    Como posso fazer isto? Tenho um site que desenvolvi em PHP e CSS funciona, porém no C# MVC3 não.

    Meu CSS está abaixo:

    #conteudo  
    {
    	text-align          :   left;	
    	padding             :   20px;	
    	background-color    :   #F0F0F0;			
        /*height              :   auto !important;*/
         min-height         :   400px;
    }
    
    html>body#conteudo  
    {
        text-align          :   left;
    	padding             :   20px;	
    	background-color    :   #F0F0F0;	
    	height              :   500px;	
    }


    abs


    Marlon Tiedt
    www.sesmt.com.br

    quarta-feira, 2 de janeiro de 2013 19:22

Respostas

  • Na verdade ontem estava fazendo outros teste e descobri minha falha. Era problema no CSS.

    Era assim:

    .linha
    {    
        text-align          :   left;
        float               :   left;       
        clear               :   left;           
        width               :   100%;                    
    }

    Ficou assim:

    .linha
    {    
        text-align          :   left;
        clear               :   left;           
        width               :   100%;                    
    }
    O grande problema era o float.

    abs




    Marlon Tiedt
    www.sesmt.com.br

    • Marcado como Resposta Marlon Tiedt quarta-feira, 9 de janeiro de 2013 10:56
    quarta-feira, 9 de janeiro de 2013 10:56

Todas as Respostas

  • Põe o código da view que faz isso, e tb o da action e se puder explica um pouco melhor porque está confuso.

    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    quarta-feira, 2 de janeiro de 2013 19:41
  • Vou tentar melhorar o que está acontecendo comigo.

    A imagem 1 mostra o layout padrão.



    A parte circulada em vermelho é meu topo. A parte preta é o corpo, e a parte azul o rodapé.

    A parte circulada em amarelo vem de um RenderPartial.

    O que está acontecendo é que o corpo eu queria que ele tive-se a altura minima da tela da pessoa, quando tiver pouco conteúdo e ter altera "infinito" quando tiver conteúdo.

    O problema que acontece é que não fica com altura minima, e quando tem conteudo, o rodapé, fica no meio da tela conforme a imagem 2.



    O _Layout.chtml está abaixo. Retirei as chamadas de CSS e JQ para ficar melhor.

    <!DOCTYPE html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
    </head>
    
    <body>
        <div id="topo">
            <div id="topo_direita">            
                @Html.Partial("_UsuarioLogOn")
            </div>
            @Html.Partial("_Menu")
        </div>
        <div id="tudo">
    	    <div id="conteudo">              
                @RenderBody()            
            </div>
            <div id="rodape">           
                Copyright © 2012 Todos os diretos reservados<br />            
            </div>
        </div>
    </body>
    </html>
    A action está aqui:

    public ActionResult Detalhar(int id)
    {
        Cliente cliente = db.Cliente.Find(id);
    
        var retorno = ERP.Helpers.EntidadeBase.ValidarRegistro(cliente, true);
        if (retorno != "")
        {
            TempData["MsgRetornoError"] = retorno;
            return RedirectToAction("Index", "Home");
        }
    
        return View(cliente);
    }

    A view está aqui:

    @model ERP.Models.Cliente
               
    @{
        ViewBag.Title = "FlexGestor - Detalhe Cliente";
    
    }
    
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true);    
        @Html.HiddenFor(m => m.ClienteID)
    
        <div class="linha">    
            <b>Cliente seleciona:</b> @Model.Pessoa.Nome
            <br />
            <br />
    
        </div>
        <div class="linha">
        <div id="tabs">
    	        <ul>
    		        <li><a href="#tabs-1">Dados básicos</a></li>		    
                    <li><a href="#tabs-2">Setores</a></li>
                    <li><a href="#tabs-3">Funções</a></li>
    	        </ul>        
    	        <div id="tabs-1" style="height:160px">  
                    <div class="linha">                    
                        <div class="coluna" style="width:120px">@Html.LabelFor(m => m.LimiteCredito) </div>
                    </div>
                    <div class="linha">                    
                        <div class="coluna" style="width:120px">@Html.TextBoxFor(m => m.LimiteCredito, new { style = "width:120px;" })</div>
                    </div>      
    
                </div>
                <div id="tabs-2" style="height:160px">
                    <div class="linha">
                        @Html.MontarBotaoInserir("Setor", Model.ClienteID)
                    </div>
    
                    <div class="linha_sepador"></div>     
    
                    <div class="linha">
                        <br />    
                    </div>
                    <div class="linha">
                        <table id="grid" class="scroll" cellpadding="0" cellspacing="0"></table>
                        <div id="pager" class="scroll" style="text-align:center;"></div>
                    </div>
                </div>
                <div id="tabs-3" style="height:160px">
                    Funções                  
                    <div class="linha">
                        <table id="grid2" class="scroll" cellpadding="0" cellspacing="0"></table>
                        <div id="pager2" class="scroll" style="text-align:center;"></div>
                    </div>                  
                </div>
        </div>
        </div>
         <div class="linha">    
            <br />
            @Html.MontarBotoesDetalhar(Model)
            <br />
        </div>         
        
    }
    
    
    <div class="linha">    
    @{
        Html.RenderPartial("_Detalhar", Model);      
    }
    </div>       
    
    <div id="quebra" class="linha"></div>

    abs


    Marlon Tiedt
    www.sesmt.com.br

    quinta-feira, 3 de janeiro de 2013 00:07
  • Já pensou em criar um _footer.cshtml na sua paster shared, ou global por exemplo?

    Nela você coloca seu footer e chama o footer no global, que também pode ter uma header...



    Aprendendo Ad Eternum

    • Marcado como Resposta Marlon Tiedt quarta-feira, 9 de janeiro de 2013 10:56
    • Não Marcado como Resposta Marlon Tiedt quarta-feira, 9 de janeiro de 2013 10:56
    terça-feira, 8 de janeiro de 2013 18:38
  • Na verdade ontem estava fazendo outros teste e descobri minha falha. Era problema no CSS.

    Era assim:

    .linha
    {    
        text-align          :   left;
        float               :   left;       
        clear               :   left;           
        width               :   100%;                    
    }

    Ficou assim:

    .linha
    {    
        text-align          :   left;
        clear               :   left;           
        width               :   100%;                    
    }
    O grande problema era o float.

    abs




    Marlon Tiedt
    www.sesmt.com.br

    • Marcado como Resposta Marlon Tiedt quarta-feira, 9 de janeiro de 2013 10:56
    quarta-feira, 9 de janeiro de 2013 10:56