3

Não consigo deixar meu layout como deveria, a idéia é deixar do seguinte modo:

  +-------------------------------------------------+
  |  logo      |          Menu Superior             |
  |            |------------------------------------+
  |------------|                                    |
  |            |                                    |
  |Menu        |         Conteudo                   |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |------------|------------------------------------|
  | outra logo |          Rodapé                    |
  +-------------------------------------------------+

esta e minha tela principal, preciso que funciona os menus, pois se copiar isto e executar com o bootstrap, vai ver que o rodapé fica no meio da tela, o menu fica maior que a parte do conteúdo e etc. O ideal é deixar todo responsivo, tanto a parte da esquerda quanto a da direita.

    <body class="sidebar-mini">
    <div class="wrapper ">
        <div class="col-sm-2 col-lg" style="background-color: #252525;">
            <div class="row navbar" style="text-align: center; vertical-align: middle; padding-top: 35px;">
                <img src="~/Images/tecbox/logo_tecbox.png" style="max-height: 80px;" />
            </div>
            <div class="row">
                @Html.Partial("_Menu")

            </div>
            <div class="row" style="margin-top: 60px; text-align:center; background-color: #363636">
                <img src="~/Images/logo-infoworld.png" style="max-width: 150px;" />
            </div>
        </div>
        <div class="col-lg-10 text-center" style="background-color: black;">
            <div class="row navbar navbar-static-top" style="background-color: steelblue;">
                <div class="navbar-custom-menu" style="width: 100%;">
                    <div class="col-md-4" style="text-align: left;">
                        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" style="height: 60px;">
                            <span class="sr-only">Toggle navigation</span>
                        </a>
                        <a href="@Url.Action("Index")" style="color: white; font-size: 20px;">
                            <img src="~/Images/tecbox/icons/home-icon.png" style="max-height: 40px; padding-left: 5px;" />
                            <span class="hidden-xs">Home</span>
                        </a>
                    </div>

                    <div class="col-md-4" style="color: white;">
                        <span>nome da loja - bla bla - bla bla</span>
                    </div>
                    <div class="col-md-4" style="text-align: right;">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <span class="hidden-xs" style="padding-right: 10px;">Negrini</span>
                            <img src="~/Images/tecbox/semFoto300x300.png" alt="Foto" class="image-semfoto" />
                        </a>
                        <ul class="dropdown-menu menu-superior">
                            <!-- User image -->
                            <li class="user-header">
                                <a>
                                    <span>
                                        <b>Alterar imagem da conta</b>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <hr class="divider" />
                            </li>
                            <li class="user-header">
                                <a>
                                    <span>
                                        <b>Alterar senha</b>
                                    </span>
                                </a>
                            </li>
                            <li class="user-header">
                                <a>
                                    <span>
                                        <b>Histórico de acessos</b>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <hr class="divider" />
                            </li>
                            <li class="user-header">
                                <a>
                                    <span>
                                        <b>Trocar loja</b>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <hr class="divider" />
                            </li>
                            <li class="user-header">
                                <a>
                                    <span>
                                        <b>Bloquear</b>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <hr class="divider" />
                            </li>
                            <li class="user-header">
                                <a>
                                    <span>
                                        <b>Sobre</b>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <hr class="divider" />
                            </li>
                            <li class="user-header">
                                <a>
                                    <span>
                                        <b>Trocar usuário</b>
                                    </span>
                                </a>
                            </li>
                            <li class="user-header">
                                <a>
                                    <span>
                                        <b>Sair</b>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <a href="#" data-toggle="control-sidebar" style="height: 60px;"><i class="fa fa-gears"></i></a>
                    </div>
                    <!-- Control Sidebar Toggle Button -->

                </div>
            </div>
            <div class="row">
                <section class="content" ng-model="idForTransactions" ng-controller="MainController">
                    <!-- sidebar: style can be found in sidebar.less -->
                    <section class="sidebar">
                        <ul class="sidebar-menu">
                            <li class="menu-principal">
                                <a href="~/Home/Cadastros" style="background-color: #375DC0;">
                                    @*<i class="fa fa-envelope"></i>*@ <span>Cadastros</span>
                                    @*<small class="label pull-right bg-yellow">12</small>*@
                                </a>
                            </li>
                            <li class="menu-principal">
                                <a href="pages/mailbox/mailbox.html" style="background-color: #8e4e71;">
                                    @*<i class="fa fa-envelope"></i>*@ <span>Movimentações</span>
                                    @*<small class="label pull-right bg-yellow">12</small>*@
                                </a>
                            </li>
                            <li class="menu-principal">
                                <a href="pages/mailbox/mailbox.html" style="background-color: #CE603B; ">
                                    @*<i class="fa fa-envelope"></i>*@ <span>Financeiro</span>
                                    @*<small class="label pull-right bg-yellow">12</small>*@
                                </a>
                            </li>
                            <li class="menu-principal">
                                <a href="pages/mailbox/mailbox.html" style="background-color: #E38C23; ">
                                    @*<i class="fa fa-envelope"></i>*@ <span>Comercial</span>
                                    @*<small class="label pull-right bg-yellow">12</small>*@
                                </a>
                            </li>
                            <li class="menu-principal">
                                <a href="pages/mailbox/mailbox.html" style="background-color: #96A040; ">
                                    @*<i class="fa fa-envelope"></i>*@ <span>Configurações</span>
                                    @*<small class="label pull-right bg-yellow">12</small>*@
                                </a>
                            </li>
                            <li class="menu-principal">
                                <a href="pages/mailbox/mailbox.html" style="background-color: #DEB887; ">
                                    @*<i class="fa fa-envelope"></i>*@ <span>Relatórios</span>
                                    @*<small class="label pull-right bg-yellow">12</small>*@
                                </a>
                            </li>
                        </ul>
                    </section>
                </section>
            </div>
            <div class="row bg-fuchsia bottom" style="padding: 15px;">
                rodapé
            </div>
        </div>
    </div>
<-- scripts -->
</body>

Situação atual:

inserir a descrição da imagem aqui

como da para notar, nenhuma das partes chega até o final da tela.

UPDATE: quando o conteúdo central é inserido e não é pouca informação, o layout volta a quebrar como na imagem abaixo.

inserir a descrição da imagem aqui

5
  • 1
    Você quer que a área do conteúdo expanda até que a área do rodapé toque na parte inferior da tela? É esse o problema? Se for precisas usar javascript, daí eu te passo uma fórmula que uso.
    – KaduAmaral
    12/08/2015 às 17:51
  • exatamente, a área do conteudo vai váriar bastante, ou seja, ela deve se adaptar, mas sempre ficar até a parte de baixo da tela, a mesma coisa com o menu lateral esquerdo, a logo 'infoworld' deve ficar sempre alinhada ao rodapé 12/08/2015 às 17:53
  • @KaduAmaral ve em cima por favor. 12/08/2015 às 18:00
  • Acho que você poderia resolver isso com uma certa facilidade usando CSS com medidas em %. Basicamente deixando a logo marca com 20% da altura do browser, os menus com 80%. E uma dica: css in-line é uma dor de cabeça pra dar manutenção.
    – mutlei
    12/08/2015 às 18:23
  • @LuizNegrini pronta a resposta, qualquer dúvida dá um toque.
    – KaduAmaral
    12/08/2015 às 19:31

2 Respostas 2

3

A formula para fixar a altura do conteiner é bem simples:

WindowHeight - MenuHeight - FooterHeight

Ou seja, altura da janela, menos a altura do menu e do rodapé, com o menu lateral é a mesma coisa com a logo do topo e do rodapé. Atribua o IDs nesses blocos para manipular suas alturas e faça-o.

// Guarda os elementos em variáveis.
var $logotop = $('#logo-top');
var $sidemenu = $('#side-menu');
var $logobot = $('#logo-bot');

var $menutop = $('#menu-top');
var $maincontent = $('#main-content');
var $footer = $('#footer');

$(window).resize(function(event){
  
  var windowheight = $(window).height(); // Guarda a altura da janela

  // Altura da logo do topo e do rodapé 
  var loff = $logotop.outerHeight(true) + $logobot.outerHeight(true);
  // Altura do menu do topo e do rodapé 
  var roff = $menutop.outerHeight(true) + $footer.outerHeight(true);
  
  // Altura da coluna esquerda
  var lh = $sidemenu.outerHeight(true) + loff;

  // Altura da coluna direita
  var rh = $maincontent.outerHeight(true) + roff;

  // Se ambas alturas ultrapassarem a da janela pega a maior
  if (lh > windowheight && rh > windowheight){
    var mh = (lh > rh ? lh : rh);
  } else if (lh > windowheight){ // Se apenas a coluna esquera for maior
    var mh = lh;
  } else if (rh > windowheight){ // Se apenas a coluna direita for maior
    var mh = rh;
  } else { // Se ambas forem menores, pega altura da janela
      var mh = windowheight - 10; // Esse -10 é algum bug que ainda não olhei
  }

  // Atribui altura mínima para menu lateral
  $sidemenu.css('min-height', mh - loff + 10); // Obs esse +10 é algum bug que ainda não olhei.
  // Atribui altura mínima para conteúdo
  $maincontent.css('min-height', mh - roff);
}).resize();
#logo-top {background-color:yellow;}
#footer{background-color:green;}
#side-menu, #logo-bot, #main-content{color:white;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" style="background-color: #252525;">
   <div class="row navbar" id="logo-top" style="text-align: center; vertical-align: middle; padding-top: 35px;">
       Logo
   </div>
   <div class="row" id="side-menu">
       <p>Menu</p>
   </div>
   <div class="row" style="margin-top: 60px; text-align:center; background-color: #363636" id="logo-bot">
       Logo Rodapé
   </div>
</div>

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 text-center" style="background-color: black;">
   <div class="row navbar navbar-static-top" style="background-color: steelblue;" id="menu-top">
      Menu
   </div>
   <div class="row">
       <section class="content" ng-model="idForTransactions" ng-controller="MainController" id="main-content">
          <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
       </section>
   </div>
   <div class="row bg-fuchsia bottom" style="padding: 15px;" id="footer">
       Rodapé
   </div>
</div>

Note que como estamos alterando a propriedade min-height, não haverá nenhum problema o conteúdo ultrapasse essa altura. E também estamos realizando essas modificações no evento resize da janela, assim caso o usuário redimensione a janela do navegador as alturas acompanharão a janela até o limite da altura do conteúdo.

9
  • realizei as modificações e ele ficou como estava antes. Parece que ignorou os cálculos.... 12/08/2015 às 19:34
  • 1
    Alguma coisa você fez errado então @LuizNegrini. Atribuiu os IDs aos elementos? Está usando jQuery? Colocou o código após a renderização do layout (de preferência no $(document).ready)?
    – KaduAmaral
    12/08/2015 às 19:46
  • 1
    acabei de tentar de outra forma e funcionou! Valeu a ajuda @KaduAmaral ficou bem como queria. 12/08/2015 às 19:52
  • agora passando para outra página, quando o conteúdo esta grande na parte de conteudo mesmo, o menu esquerdo não o acompanha, fica como no link que coloquei no update da pergunta. 12/08/2015 às 20:31
  • acredito que a solução é inserir um max-height na minha tabela que esta no conteudo de acordo com o tamanho da tela.... 12/08/2015 às 20:35
2

Luiz Negrini, independente de está usando Bootstrap, voçê pode usar a estrategia abaixo, no caso você vai precisar apenas de css para definir a posição de cada elemento na pagina.

Note que tudo depende da posição das divs e suas respectivas "ancoras".

div {
    box-sizing: border-box;
}

#container {
    position: fixed;
    padding: 0px;
    margin: 0px;
    top: 0px;
    right: 0px;   
    left: 0px;
    bottom: 0px;
}

#logo1 {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 96px;
}

#sideMenu {
    position: absolute;
    top: 96px;
    right: 0px;   
    left: 0px;
    bottom: 48px;
    overflow-y: auto;
}

#logo2 {
    position: absolute;    
    right: 0px;   
    bottom: 0px;
    left: 0px;
    height: 48px;
}

#topMenu {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 48px;
}

#content {
    position: absolute;
    top: 48px;
    right: 0px;   
    left: 0px;
    bottom: 48px;
    overflow-y: auto;
}

#esquerda, #direita {
    position: relative;
    height: 100%;
}

#footer {
    position: absolute;    
    right: 0px;   
    bottom: 0px;
    left: 0px;
    height: 48px;
}

#logo1, #sideMenu, #logo2,
#topMenu, #content, #footer {
    border: 1px solid black;
}

.linha {
    width: 100%
    clear: both;
}

.celula {
    float: left;
}

.celula-2 {
    width: 16.66%;
}

.celula-10 {
    width: 83.33%;
}
<div id="container" class="linha">
  <div id="esquerda" class="celula celula-2">
    <div id="logo1">
      logo  
    </div>
    <div id="sideMenu">
      Menu  
    </div>
    <div id="logo2">
      outra logo
    </div>
  </div>
  <div id="direita" class="celula celula-10">
    <div id="topMenu">
      Menu Superior  
    </div>
    <div id="content">
      <p>
        Conteudo
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim efficitur lorem, lobortis rhoncus erat elementum nec. Sed imperdiet in ante sit amet consectetur. Nullam ac nisl gravida, fermentum ex vitae, hendrerit orci. Proin ullamcorper sapien vitae odio pellentesque, ac volutpat urna accumsan. Suspendisse risus felis, iaculis eu sagittis in, posuere a purus. Morbi eget hendrerit mi. Nulla dapibus magna faucibus lobortis malesuada. Praesent vehicula dui tortor, scelerisque commodo nunc lacinia nec. Nulla condimentum erat eu est auctor aliquam. Fusce nec neque rutrum, cursus tortor in, luctus sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eleifend odio in nunc porta tristique. Nam luctus ultrices ex, sit amet maximus mauris iaculis finibus. Nulla fringilla erat in mattis fermentum. Suspendisse hendrerit lacinia nisi quis interdum. Duis pellentesque dignissim lacus, quis imperdiet tellus mattis nec.
      </p>
      <p>
        Quisque ac arcu turpis. Fusce suscipit fermentum arcu. Donec porta, elit eget finibus bibendum, neque lorem accumsan eros, in ultrices turpis neque ut nulla. Donec dolor mi, tristique sit amet fringilla non, malesuada ac ante. Cras porttitor sed nisl sit amet dignissim. Aenean convallis quis magna quis cursus. Nam fringilla tincidunt nibh vel porttitor.
      </p>
      <p>
        Nam vitae luctus justo. Donec ac volutpat odio. Vivamus in justo risus. Aenean pharetra orci tellus, quis accumsan sem convallis at. In non mauris rhoncus, faucibus tortor at, bibendum nibh. Pellentesque faucibus, nisi blandit viverra sodales, felis quam faucibus turpis, ornare condimentum ex risus nec elit. Nam ullamcorper aliquet bibendum. Curabitur eu diam auctor nulla auctor fringilla. Nunc eleifend sollicitudin sagittis. Aliquam erat volutpat. Suspendisse eget lobortis libero. In venenatis egestas dui, sed tincidunt lectus commodo ut. Nulla ultrices convallis purus, eu faucibus turpis luctus sed. Morbi nec tellus id odio ultrices posuere eu vel odio. Fusce tincidunt at eros a cursus. Vestibulum cursus rhoncus est, quis commodo sem scelerisque vel.
      </p>
      <p>
        Donec tellus nisl, semper quis blandit sit amet, iaculis vel nulla. Proin metus arcu, fringilla et varius et, pretium non nisl. Sed erat justo, efficitur quis ipsum ac, cursus congue ipsum. Suspendisse ut convallis libero, nec commodo nibh. Nam et pretium ante. Sed sit amet tincidunt lacus, ac egestas urna. Integer auctor enim nulla, vel molestie justo luctus eget.
      </p>
      <p>
        Duis a libero in nisl vestibulum dapibus. Sed vulputate odio quis eros pretium, eu vehicula mauris ornare. Curabitur ornare neque sed mattis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus efficitur sollicitudin ipsum sed varius. Vivamus congue consectetur est, viverra luctus risus venenatis ac. Phasellus ultricies dignissim arcu, et venenatis est sagittis pulvinar. In et rhoncus mauris. Proin egestas eu mauris id gravida. Donec ac tincidunt neque.
      </p>
    </div>
    <div id="footer">
      Rodapé  
    </div>
  </div> 
</div>

tentei simular as classes do boostrap usando as classes linha e celula-2 e celula-10.

Caso precise que o Menu Lateral tenha um tamanho fixo, basta usar position: absolute e definir um width para ele para o painel da esquerda, enquanto que no painel da direira você coloca o valor da "ancora" left igual ao width do painel da esquerda

1
  • A solução com CSS é boa (+1 por isso), mas depende do caso se a pessoa quer que o rodapé fique sempre aparecendo...
    – KaduAmaral
    12/08/2015 às 20:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .