0

At this page I have the navigation menu .slider-btm underneath the head image ("Branding, Print, Websites & Movies, Displays & Signage") with:

.slider-btm {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 60px;
    z-index: 10;
}

and parent:

<div class="slider-outer-wrapper" style="position:relative">

yet the navigation menu .slider-btm is not at the bottom of the screen. I see the following:

enter image description here

I wish to have this menu at the bottom like the menu at the bottom of brand.insightdesign.com.au

Help appreciated.

Steve
  • 2,066
  • 13
  • 60
  • 115
  • `is not at the bottom of the screen` -->this is position fixed – Temani Afif May 04 '18 at 08:35
  • `bottom:0` to .slider-btm class is working with absolute positioning but the `max-height: 1000px` to .slider-outer-wrapper is restricting the height of the parent div to 1000px from 100vh. Just remove the max-height property from .slider-outer-wrapper class. brand.insightdesign.com.au used the same technique. – Chetan Kalra May 04 '18 at 09:07

3 Answers3

1

In an ultra-basic way, that website (that you have removed from your question) would have the container measure the height of your window and attach the height of the window to the header(container) and then absolute position the menu to the bottom of this container (see code for a very rough example)

.container {
background:red;
position:relative;
height:100vh;
}
li {
list-style:none;
float:left;
}
.menu {
position:absolute;
bottom:0;
width:100%;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="container">
<div class="menu">
  <ul>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
  </ul>
</div>
</div>
<h1>This is more content</h1>

If you need anything further explaining, let me know.

--- UPDATE ---

Instead of using JavaScript to work out the height of your browser window, simply add height:100vh to the container height. This will match the container height to the browser height, give you the same outcome (just through CSS rather than JavaScript - with the added positive of that this you won't have to assign this to an on resize in case the user resizes their screen). I have updated the code above.

--- FURTHER UPDATE ---

Thanks, by moving .slider-btm out of .slider-outer-wrapper container, this should resolve your issue so that .slider-btm can sit at the bottom of your container which is 100vh.

M. Ferguson
  • 1,331
  • 1
  • 10
  • 15
  • Does `brand.insightdesign.com.au` do something like the above? – Steve May 04 '18 at 08:49
  • What website have I removed from my question? :-) – Steve May 04 '18 at 08:51
  • Sorry, You moved it, i didn't see it at the bottom of the question now. Instead of using javascript to measure the window height, you can use height: 100vh within the container so that your container would match the height of your window. Then after this container, you can carry on with other content. This will give you the effect your menu is at the bottom of the page. – M. Ferguson May 04 '18 at 08:54
  • `#pgc-80-0-0 {height: 100vh;}` does not change anything. .slider-outer-wrapper is already `height: 100vh` but that doesn't seem to be active. – Steve May 04 '18 at 09:02
  • move .slider-btm out of #pg-80-0 so it's the next element and that should fix it. – M. Ferguson May 04 '18 at 09:13
  • Thanks, moving `.slider-btm` out of `
    ` resolved the issue. Update your answer and I'll accept it.
     – Steve May 08 '18 at 02:32
  • That's great news. Glad it's now working. I've updated the answer so if you can upvote and accept, that would be great. – M. Ferguson May 08 '18 at 08:54
0

You want to have the bar fixed at the bottom of the screen, also while scrolling?

Use position: fixed

.slider-btm {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 60px;
    z-index: 10;
}
jdickel
  • 1,437
  • 1
  • 11
  • 21
  • No, not fixed at the bottom of the screen, but like the menu at the bottom of brand.insightdesign.com.au – Steve May 04 '18 at 08:37
  • 1
    Well, it IS exactly like this atm... What exactly isn't working? – jdickel May 04 '18 at 08:39
  • I've added a screenshot of what I see to my question (after clearing my browser cache and cookies). Do you see something different? – Steve May 04 '18 at 08:45
  • I don't see it like you do. For me it looks like your desired result. Which browser are you using and on which resolution does it occur? – jdickel May 04 '18 at 09:01
  • I am using Chrome on a 5K Mac. I will check at home on a 2K screen. – Steve May 04 '18 at 09:02
  • Sorry for the question, but do you use the browser zoom? Try CMD "+" or CMD "-" in the browser to check if you are on 100% view size. Chrome iself works fine, on a mac as well. – jdickel May 04 '18 at 09:10
0

i think the issue is the the different screen resolution of the devices , add this line to the "slider-outer-wrapper" class

.slider-outer-wrapper{
       position: relative;
       height: 100%;
}

you have added max-height property , please remove it

enter image description here

after removing

enter image description here

subramanian
  • 1,125
  • 1
  • 12
  • 12
  • Hi subbu. Position is already `relative` and height is already `100vh` so adding the CSS above makes no change. :) – Steve May 04 '18 at 08:58
  • hi steve, just had a look at the code , i suppose the max-height property is causing issue – subramanian May 04 '18 at 09:48