3
I can not leave my layout as it should, the idea is to leave as follows:
+-------------------------------------------------+
| logo | Menu Superior |
| |------------------------------------+
|------------| |
| | |
|Menu | Conteudo |
| | |
| | |
| | |
| | |
| | |
| | |
|------------|------------------------------------|
| outra logo | Rodapé |
+-------------------------------------------------+
this and my main screen, I need to work the menus, because if you copy this and run with bootstrap, you will see that the footer is in the middle of the screen, the menu is bigger than the content part and etc. The ideal is to leave all responsive, both the left and the right part.
<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>
Current situation:
as noted, none of the parts reaches the end of the screen.
UPDATE: when the central content is inserted and is not a little information, the layout breaks again as in the image below.
Do you want the content area to expand until the footer area touches the bottom of the screen? Is that the problem? If you need to use javascript, then I’ll give you a formula I use.
– KaduAmaral
exactly, the area of the content will vary enough, ie, it should adapt, but always stay until the bottom of the screen, the same thing with the left side menu, the logo 'Infoworld' should always be aligned to the footer
– Luiz Negrini
@Kaduamaral see above please.
– Luiz Negrini
I think you could solve this with a certain ease using CSS measures in %. Basically leaving the logo marked with 20% of the height of the browser, the menus with 80%. And a tip: in-line css is one headache for maintenance purposes.
– mutlei
@Luiznegrini ready the answer, any doubt gives a touch.
– KaduAmaral