2

I'm trying to create a footer but when ever I open my console view on Chrome the footer comes up along with the console. I've looked at many other people having the same issue but they fixed it by setting the position of the footer to fixed or absolute, but when I try both I still get the same result.

Threads I've looked at: Footer goes up whenever i open Chrome Console How do you get the footer to stay at the bottom of a Web page?

Here is what my CSS looks like currently:

html,
body {
  height: 100%;
  min-height: 100%;
}

.footer {
  width: 100%;
  bottom: 0px;
  left: 0px;
  height: 100px;
  position: fixed;
  background-color: #727272;
}

.footer p {
  color: white;
}
<div class="footer">
  <div class="wrapper">
    <p>testing</p>
  </div>
</div>

the wrapper class only creates margins on the left and the right.

cloned
  • 6,346
  • 4
  • 26
  • 38
justanotherguy
  • 395
  • 4
  • 17

1 Answers1

2

Here's how to make your footer always stay down, without using position:fixed, using your example:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
.main {
  flex-grow: 1;  
}

.footer {
  flex-grow: 0;
  background-color: #727272;
}

.footer p {
  color: white;
}
<body>
  <div class="main">
    put your content here...
  </div>
  <div class="footer">
    <div class="wrapper">
      <p>testing</p>

    </div>
  </div>
</body>

A complete and semantically correct layout would be:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex-grow: 0;
}

main {
  flex-grow: 1;
}
<html>
  <head></head>
  <body>
    <header>
      Your header here
    </header>
    <main>
      Your content here
    </main>
    <footer>
      Your footer here
    </footer>
  </body>
</html>

The <footer> and <header> will take the space they need but not more. <main> grows in the remaining space. When <main> needs more than the available space, it pushes <footer> down.

tao
  • 82,996
  • 16
  • 114
  • 150
  • do I need the `main` class as well? Also what does flex-grow do? – justanotherguy Jan 27 '19 at 00:10
  • You don't *"need"* it, but I used it to select that particular element. When the parent has more length than the children (in our case length is height, because `flex-direction` is `column`) it distributes positive space according to `flex-grow`. Because `.footer` has `flex-grow:0`, it doesn't grow, while `.main` has `1` and grows. – tao Jan 27 '19 at 00:15
  • The proper and complete layout example would be [this one](https://jsfiddle.net/websiter/1n2g9orv/). It uses semantically correct elements and includes `
    `.
     – tao Jan 27 '19 at 00:30
  • I just tried it and I still get the same thing. https://gyazo.com/f9a357272ecd8d22c886a799971d19cd – justanotherguy Jan 27 '19 at 19:17
  • @Andrei_Gheorghiu If you also click the Expand Snippet button under your code you can see that the footer still goes up with the Chrome Console. – justanotherguy Jan 27 '19 at 19:21
  • When you open the console, the **entire page** gets shrunk by the space of the console, because the console is not part of the page. To get the console out of the browser window, click on the three dots icon to the right of the console panel and select the icon with two squares overlapping. – tao Jan 27 '19 at 19:22
  • Huh thats a useful thing to know, but also isn't it possible to have the page not react to the console? For example if you look at the footer on this website it doesnt move when you open up the console view. That's what I'm trying to achieve here. – justanotherguy Jan 27 '19 at 19:27
  • If you select the two overlapping squares icon you get the dev tools opening in a separate browser window, which results in the initial page not being affected by dev tools at all. [This icon](https://i.stack.imgur.com/WL17J.png). – tao Jan 27 '19 at 19:28
  • Maybe I'm not correctly describing what I'm trying to get at. If you look at this https://gyazo.com/a0e5507f06ad12593197df6981c49615 you can see how the footer is not affected by the console even though the console is still attacked to the page. But if you look at the example you provided gyazo.com/f9a357272ecd8d22c886a799971d19cd You can see that the footer stays with the console view. I'm trying to achieve a footer like the first image that is not affected by the console view if its attached to the page. – justanotherguy Jan 27 '19 at 19:31
  • When your page gets resized (shrinked in height) the footer goes up, because there's no content above it to push it down and develop a scrollbar). On StackOverflow, there is content above it which pushes it down and when you shrink the page you can see the change if you look at the scrollbar. You can scroll down and you'll see the full footer. The page gets affected in both cases: the height decreases. But they behave differently because one has content and the other one does not. Regardless of console, you see same behavior if you just resize browser window with each page. You get it? – tao Jan 27 '19 at 19:34
  • Hmm, that makes sense thank you. One last question, is it possible to add content that isn't necessarily there to avoid this or its just something I have to deal with. – justanotherguy Jan 27 '19 at 19:37
  • That's not technically possible. What you seem to want is to push the footer beyond viewport size, depending on whether or not the page was resized because console is open in the same browser window. But the page can't access this information. All it knows is current viewport size. You can't have footer go below viewport in one case and stay at the bottom in some other cases if the window can't determine the case. Besides, what would be the utility of this? – tao Jan 27 '19 at 19:41
  • Thinking about it, you could use JavaScript to set `
    ` height with inline style, on `window.load` event. This way, when it gets shrunk, it will remain at that height and scrollbar would appear. But you also need a listener on `resize` to check for the opposite case: when you open the page on a landscape mobile device and then switch to portrait, you want `
    ` to be allowed to grow. In theory, it can be done, but it seems like too much trouble trying to change a default behavior which is what most users consider normal behavior.
     – tao Jan 27 '19 at 19:46
  • Ok it seems like extra work for something that isn't useful. Thanks for the help! – justanotherguy Jan 27 '19 at 19:48