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:
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.