Fixed menu interferes with footer positioning

Question

Fixed menu interferes with footer positioning

Asked 6 years, 5 months ago

Viewed 429 times

-1

I am developing a web application and put a side menu with <aside> and also a footer in my application, but the footer content does not go down but stays in the middle of the application screen.

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Menu do site do Maujor &#8212; Etapa 5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/css.css" type="text/css">
		<link rel="stylesheet" href="css/font-awesome.css" type="text/css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="bootstrap/bootstrap.css"> 
	<link rel="stylesheet" href="bootstrap/bootstrap.min.js"> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
        
        <style>
        /* 2a. Etapa */
@charset "UTF-8";
/* Folha de estilos:
Autor: Maurício Samy Silva
Versões
Data: 26/04/2014 - Redesign do site
*/
/* =CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@font-face {
    font-family: 'Fixation';
    src: url('css/Fixation.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
        
       
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
#busca{
	width: 90%;
}

.footer_titulo{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.conteudo_footer{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.fale{
	margin-top: 40px;
	margin-left:40px;
	font-family: 'Fixation';
	font-weight: 700;
}
.entre{
	margin-top: 40px;
	margin-left: 160px;
	font-family: 'Fixation';
	font-weight: 700;
}
.imagem_header{
	width: 35%;
	
	
}
.campo_busca{
	margin-top: 40px;
	margin-left: 160px;
	border: 1px radius solid;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Fim CSS Reset */
/* =GERAL */
*, html, body {
	margin:0;
	padding:0;
	}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
body {
	margin-left:55px;
	font:  62.5%/1.2 'Fixation';
	}

/* Fim 2a. Etapa */
/* 3a. Etapa */
#lateral {
	padding:0 50px 0 0;
	-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
				transition: all 0.5s ease;
	font-size:1.2em;
	background:rgb(44,62,80);
	background-image: -moz-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
			background-image: -webkit-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
					background-image: -o-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
							background-image: -ms-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
								background-image: linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
	height:100%;
	overflow:hidden;
	width:370px; 
	position:fixed;
	top:0;

	left:-320px;
	margin-top: 107px;
	font-family: 'Fixation';
	}

.teste{
	border-bottom: 1px solid black;
	width: 100%;
}
#lateral:before {
	z-index:1000;
	content: url(icone-menu.png);
	font-size:4em;
	color:white;
	position:fixed;
	left:4px;
	top:45px;
	}
#lateral:hover:before, #lateral:focus:before {
left:-500px
	}

.botao_menu_celular{
	display: none;
}
#lateral:hover, #lateral:focus,  #lateral:active  {
	overflow-y:scroll;
	-moz-transform: translate(320px, 0);
		-webkit-transform: translate(320px, 0);
			-o-transform: translate(320px, 0);
				transform: translate(320px, 0);
	padding-right:0;
	}	
/* Fim 3a. Etapa */
/* 4a. Etapa */
#lateral .box {
	list-style-type:none;
	margin-bottom:1em;;
	padding-bottom:1em;
	}
#lateral h3 {
	display:inline-block;
	font-weight:bold;
	font-size:1.6em;
	font-style:normal;
	padding-bottom:0.2em;
	margin: 2em 0 2em 0.81em;
	color:rgb(255,255,255);
	border-bottom: 4px solid rgb(155,155,155);
	}
#menu {
	font-style:italic;
	position:relative;
	font-size:1.0em;
	margin:1em 0 1em -1em;
	padding:0;
	}
#menu li  {margin:0;padding:0;}
#menu li a,  #menu li a:link {
	font-size:1.2em;
	color:rgb(255,255,255);
	text-decoration: none;
	padding: 0.8em 0 0.8em 1em;
	display: block;
	-moz-transition: all 1.2s ease;
			-webkit-transition: all 1.2s ease;
				-o-transition: all 1.2s ease;
					transition: all 1.2s ease;
	}
#menu li a:hover {
	color:rgb(255,255,255);
	background-color:rgba(255,255,255,0.2);
	-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
				-o-transition: all 0.5s ease;
					transition: all 0.5s ease;
	}
/* Fim 4a. Etapa */
/* 5a. Etapa */

/* Fim 5a. Etapa */


@media  (max-width: 1500px) {
	.campo_busca{
		margin-left:120px;
		width: 80%;
	}
	.entre{
		margin-left: 120px;
	}
	
}
@media  (max-width: 1200px) {
	
	.campo_busca{
		margin-left:120px;
		width: 90%;
	}
	.entre{
		margin-left: 120px;
	}
	
}



@media  (max-width: 900px) {
	body {
		
		background-color: red;
	}
	.imagem_header{
		
		width: 60%;
	}
	.campo_busca{
		margin-left: 60px;
		width: 90%;
	}
	.entre{
		margin-left: 40px;
	}
	
	

/* Fim 5a. Etapa */

@media  (max-width: 650px) {
	.fale{
		display: none;
	}
	
	.imagem_header{
		
		width: 70%;
		margin-left: 100px;
		margin-top: -40px;
	}
	.campo_busca{
		display: none;
	}
	.entre{
		margin-left: 30px;
	
		
	}
	
	.botao_menu_celular{
		display: block;
	}
	
	
	.botao_menu_celular{
			background-color:white; 
		font-weight: 900;
		height: 20px;
			border: 1px solid white;
		margin-top:40px; 
	}
	
}
        </style>
</head>

<body>
	
	<header>
		<div class="container-fluid">
		<div class="row">
			<div class="col-xs-3 col-md-3">
<button type="button" class="botao_menu_celular">MENU</button><img src="imagens/bolos.JPG" class="imagem_header">
			</div>
			
			
			</div>
		</div>
	</header>
	<div class=teste></div>

	<aside>
<div id="lateral" onclick="return true" aria-haspopup="true">
<div id="menu">

<h3 class="link-titulo">Menu</h3>  			
    <ul class="box">					
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Receitas</a></li>
        <li ><a href="#">Fale Conosco</a></li>
      		
		<div class="col-sm-12">

                <h2 class="footer_titulo">NEWSLETTER</h2>
                <p class="conteudo_footer">Assine nossa mala direta e receba muitas ofertas por e-mail.</p>
                <input type="text" id="campo_busca2"><button type="submit" onclick="" class="buscar_produto3"><i class="fa fa-search" action="" ></i></button><br><br>
            </div>
		<img src="imagens/bolos.JPG" class="imagem_header">
    </ul>
   


</div> <!-- /#menu -->
</div> <!-- /#lateral -->
	</aside>
	
	<footer>
	Conteudo do footer que era pra ficar embaixo
	</footer>
	
</body>
</html>

link with my app

When the scroll bar went down the menu was stopped,.

And do not overlap the footer when descending the scroll bar, and come up against the footer

Friend please put the code of your page in the question. Only the image does not help much to give you an accurate answer.

– hugocsl

2018/01/23 at 23:36
the code is in the link

– User1999

2018/01/23 at 23:37
Already tried to define the footer CSS as: position: Absolute; bottom: 0;

– LucasTonetto

2018/01/23 at 23:41
it was positioned down but continued under the side menu

– User1999

2018/01/23 at 23:43
I tried to decrease the height of the side menu so that when I finished the height of the menu, I saw the footer but I couldn’t do it

– User1999

2018/01/23 at 23:44
Possible duplicate of How to keep my footer down?

– celsomtrindade

2018/01/24 at 09:48

Show 1 more comment

2 answers

1

Hello, what’s happening is that inside the tag <aside> you have a <div> with position: fixed(due to the effect you want to give), and the confusion is there, I will explain to you the ways you correct this according to your needs.

CAUSE
As inside the tag <aside> has a div with fixed, this makes the <div> with fixed, be "out of the body of the gift", causing a fluctuating effect, causing the whole content below, climb, And how to tag <aside> is out of height defined, this "feeling" that is not working.

SOLUTIONS
1 - Set a height for the tag <aside> in the example I put 600px height, however, for this to work you have to leave aside the metric of the height em % onde tem oFixed` here is the example for this solution, but this solution only fits if you do not need to use %.

2 - Use position absolute, with bottom: xx (height of footer), for example, if the footer has 30px, then bottom:30px here is the example for this solution, in my view is the solution that fits most to your layout.

3 - Apply position: fixed also the tag footer, in which case it behaves like the answer above, the only difference is that now it will always be present in the viewport, as well as <aside> is. here is the example for this solution

For all solutions, you will have to change the size of the div com fixed, the id #lateral, because with 100% no height she’ll be on top of the footer, but if that’s the proposal, you won’t have to.

There are other correction options for this problem, it goes from changing the html and change the way you do the transitions, up to more surgical fixes with js for more specific cases.

I hope to have given you an overview of what happened in your layout, knowing this you can look for other solutions more calmly.

Hugs.

now there is another problem I can give a margin-bottom in the tag #side, I wish there was a space between the menu and the footer but I’m not getting

– User1999

2018/01/24 at 13:30
The margin-bottom in this case, it won’t work, because your side menu is floating with Fixed, to have this space, you have to think as follows, if the top is 10% height, the aside 80% the footer can not pass 10%, totaling 100% of the page, to give that breath, you have to decrease the height of aside, for example, 70% creating like this, 10% space between aside and footer

– Leandro carra

2018/01/24 at 13:51
Leandro ran Leandro followed his suggestions and the footer was below , , only I wanted to increase the size of the footer without interfering in the menu size is possible ? Something like this https://www.lacoste.com/br/

– User1999

2018/01/24 at 20:39
No problem, here I made you see how it works, I used the 3 resolution, and in the side #I added z-index: 1 and in the footer z-index: 0 Here the first version see how it looked https://jsfiddle.net/v718rxtg/21/ but I had to add a div into the div test. https://jsfiddle.net/v718rxtg/24/ I think this will help you.

– Leandro carra

2018/01/24 at 23:10
Now Leandro This is another problem when I put content in the middle of the screen, this content goes behind the footer, and when I lower the scrollview the menu on the side also goes behind the footer. I wanted that when I put the content in the middle of the screen the footer would be automatically down and when I download the scrollview the menu would stop when the footer https://jsfiddle.net/v718rxtg/26/

– User1999

2018/01/25 at 01:39
to have this effect on the class. total content has to have a minimum initial size, I have set 50vh but vc can change this according to your needs, and now that the content body has set size, the Absolute position is no longer accurate. see here : https://jsfiddle.net/v718rxtg/30/ I made some changes for you to understand, the final behavior.

– Leandro carra

2018/01/25 at 02:14
Leandro Check the example you give me on https://jsfiddle.net/v718rxtg/30/ the side menu it goes over the footer when I strip the page to the end, i would like that when descending the bar of the page the menu would stop descending when it arrived of encounter with the footer

– User1999

2018/01/25 at 02:18
https://jsfiddle.net/v718rxtg/30/

– Leandro carra

2018/01/25 at 02:19
I edited the question and put images as an example of that as I want, for you to understand better

– User1999

2018/01/25 at 02:29
I think I understand your need, I think this is it https://jsfiddle.net/v718rxtg/35/

– Leandro carra

2018/01/25 at 03:16
Leandro Carra did not work when scrolling down the page’s scroll bar the side menu overlaps the footer

– User1999

2018/01/25 at 21:46

Show 6 more comments

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-01-24T01:10:17+00:00

The tag <footer> does not guarantee that the element will always be at the bottom of the window. Like any other element, it will adjust to the order of the elements, from top to bottom.

When the page has content, the footer automatically will be below, not because it has this tag, but because the content of the page will push it down. As its name says, footer means footer, which is below the content.

But if you want footer always stay there at the bottom edge of the window, you need to fix it. In this case, if the page has enough content to create scrolling (scroll) and when scrolling, the footer will not move.

For this just include a CSS:

footer{
   bottom: 0;
   position: fixed;
}

See example based on your code:

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


<title>Menu do site do Maujor &#8212; Etapa 5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/css.css" type="text/css">
        
        <style>
        /* 2a. Etapa */
@charset "UTF-8";
/* Folha de estilos:
Autor: Maurício Samy Silva
Versões
Data: 26/04/2014 - Redesign do site
*/
/* =CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@font-face {
    font-family: 'Fixation';
    src: url('css/Fixation.ttf') format('truetype');
        font-style: normal;
        font-weight: normal;
        
       
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, 
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
#busca{
	width: 90%;
}

.footer_titulo{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.conteudo_footer{
	font-family: 'Fixation';
	font-weight: 700;
	color: white;
	
}
.fale{
	margin-top: 40px;
	margin-left:40px;
	font-family: 'Fixation';
	font-weight: 700;
}
.entre{
	margin-top: 40px;
	margin-left: 160px;
	font-family: 'Fixation';
	font-weight: 700;
}
.imagem_header{
	width: 35%;
	
	
}
.campo_busca{
	margin-top: 40px;
	margin-left: 160px;
	border: 1px radius solid;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Fim CSS Reset */
/* =GERAL */
*, html, body {
	margin:0;
	padding:0;
	}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
body {
	margin-left:55px;
	font:  62.5%/1.2 'Fixation';
	}

/* Fim 2a. Etapa */
/* 3a. Etapa */
#lateral {
	padding:0 50px 0 0;
	-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
				transition: all 0.5s ease;
	font-size:1.2em;
	background:rgb(44,62,80);
	background-image: -moz-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
			background-image: -webkit-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
					background-image: -o-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
							background-image: -ms-linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
								background-image: linear-gradient( 135deg, rgb(3,8,12), rgb(16,57,79) );
	height:100%;
	overflow:hidden;
	width:370px; 
	position:fixed;
	top:0;

	left:-320px;
	margin-top: 107px;
	font-family: 'Fixation';
	}

.teste{
	border-bottom: 1px solid black;
	width: 100%;
}
#lateral:before {
	z-index:1000;
	content: url(icone-menu.png);
	font-size:4em;
	color:white;
	position:fixed;
	left:4px;
	top:45px;
	}
#lateral:hover:before, #lateral:focus:before {
left:-500px
	}

.botao_menu_celular{
	display: none;
}
#lateral:hover, #lateral:focus,  #lateral:active  {
	overflow-y:scroll;
	-moz-transform: translate(320px, 0);
		-webkit-transform: translate(320px, 0);
			-o-transform: translate(320px, 0);
				transform: translate(320px, 0);
	padding-right:0;
	}	
/* Fim 3a. Etapa */
/* 4a. Etapa */
#lateral .box {
	list-style-type:none;
	margin-bottom:1em;;
	padding-bottom:1em;
	}
#lateral h3 {
	display:inline-block;
	font-weight:bold;
	font-size:1.6em;
	font-style:normal;
	padding-bottom:0.2em;
	margin: 2em 0 2em 0.81em;
	color:rgb(255,255,255);
	border-bottom: 4px solid rgb(155,155,155);
	}
#menu {
	font-style:italic;
	position:relative;
	font-size:1.0em;
	margin:1em 0 1em -1em;
	padding:0;
	}
#menu li  {margin:0;padding:0;}
#menu li a,  #menu li a:link {
	font-size:1.2em;
	color:rgb(255,255,255);
	text-decoration: none;
	padding: 0.8em 0 0.8em 1em;
	display: block;
	-moz-transition: all 1.2s ease;
			-webkit-transition: all 1.2s ease;
				-o-transition: all 1.2s ease;
					transition: all 1.2s ease;
	}
#menu li a:hover {
	color:rgb(255,255,255);
	background-color:rgba(255,255,255,0.2);
	-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
				-o-transition: all 0.5s ease;
					transition: all 0.5s ease;
	}
/* Fim 4a. Etapa */
/* 5a. Etapa */

/* Fim 5a. Etapa */


@media  (max-width: 1500px) {
	.campo_busca{
		margin-left:120px;
		width: 80%;
	}
	.entre{
		margin-left: 120px;
	}
	
}
@media  (max-width: 1200px) {
	
	.campo_busca{
		margin-left:120px;
		width: 90%;
	}
	.entre{
		margin-left: 120px;
	}
	
}



@media  (max-width: 900px) {
	body {
		
		background-color: red;
	}
	.imagem_header{
		
		width: 60%;
	}
	.campo_busca{
		margin-left: 60px;
		width: 90%;
	}
	.entre{
		margin-left: 40px;
	}
	
	

/* Fim 5a. Etapa */

@media  (max-width: 650px) {
	.fale{
		display: none;
	}
	
	.imagem_header{
		
		width: 70%;
		margin-left: 100px;
		margin-top: -40px;
	}
	.campo_busca{
		display: none;
	}
	.entre{
		margin-left: 30px;
	
		
	}
	
	.botao_menu_celular{
		display: block;
	}
	
	
	.botao_menu_celular{
			background-color:white; 
		font-weight: 900;
		height: 20px;
			border: 1px solid white;
		margin-top:40px; 
	}
	
}

footer{
   bottom: 0;
   position: fixed;
}
</style>
</head>

<body>

<header>
   <div class="container-fluid">
      <div class="row">
         <div class="col-xs-3 col-md-3">
            <button type="button" class="botao_menu_celular">MENU</button><img src="imagens/bolos.JPG" class="imagem_header">
         </div>
      </div>
   </div>
</header>
<div class=teste>
Role para baixo
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<aside>
   <div id="lateral" onclick="return true" aria-haspopup="true">
      <div id="menu">
         <h3 class="link-titulo">Menu</h3>  			
         <ul class="box">					
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Receitas</a></li>
            <li ><a href="#">Fale Conosco</a></li>
            <div class="col-sm-12">
               <h2 class="footer_titulo">NEWSLETTER</h2>
                  <p class="conteudo_footer">Assine nossa mala direta e receba muitas ofertas por e-mail.</p>
                  <input type="text" id="campo_busca2"><button type="submit" onclick="" class="buscar_produto3"><i class="fa fa-search" action="" ></i></button><br><br>
            </div>
            <img src="imagens/bolos.JPG" class="imagem_header">
         </ul>
      </div> <!-- /#menu -->
   </div> <!-- /#lateral -->
</aside>
<footer>
   Conteudo do footer que era pra ficar embaixo
</footer>

</body>
</html>