All geek questions in one place

'position: sticky' does not work when 'height' is defined

I create a landing page where the user first sees the main area with the footer. Scrolling down shows that the footer is a sticky header, and I aim to use pure CSS to achieve this. To get a full-screen view of the main content and the footer, I set the property to heighttwo different values: 92% and 8% (use vhalso does not work). No matter what heightI specify in my CSS (different units and all), my footer divdoes not stick. As soon as I delete a property height, it works as expected.

Here is a screenshot of my page before deleting properties height:

With%, landing

, :

With%, scrolled

height :

Without%, scrolled

:

html,
body {
  height: 100%;
  margin: 0;
}

#main {
  height: 92%;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}
<div id="main">
  <div id="landing">
    <div id="landingContent">
      <h1 class="logo">Logo</h1>
      <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
      <button>Button</button>
    </div>
  </div>
</div>
<div id="footerNav">
  <div id="footerNavContent">
    <h1 class="logo">Logo</h1>
  </div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
Hide result

, overflow , , , height . , .

:

  • Firefox 61 ( )
  • Safari 53 (Tech Preview)
  • Chrome 65

: ; height #main #footerNav .

+7
2

height, height, . :

- , . (, top , auto, ( ), "" .

, , , , , height:100% .

, 92% 8%, . , , :

html,
body {
  height: 100%;
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 92%;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}
<div id="main">
    <div id="landing">
        <div id="landingContent">
            <h1 class="logo">Logo</h1>
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
            <button>Button</button>
        </div>
    </div>
</div>
<div id="footerNav">
    <div id="footerNavContent">
        <h1 class="logo">Logo</h1>
    </div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
Hide result

, , . .

, , , , (body).

html,
body {
  height: 100%;
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 82%;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}
<div id="main">
    <div id="landing">
        <div id="landingContent">
            <h1 class="logo">Logo</h1>
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
            <button>Button</button>
        </div>
    </div>
</div>
<div id="footerNav">
    <div id="footerNavContent">
        <h1 class="logo">Logo</h1>
    </div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
Hide result

, height:100% . min-height . vh :

html,
body {
  /*height: 100%;
    no needed
  */ 
  margin: 0;
}
html {
  background:white;
}
body {
  background:blue;
}

#main {
  height: 92vh;
}
#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
#landingContent {
  width: 20vw;
}
#footerNav {
  height: 8vh;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
}
<div id="main">
    <div id="landing">
        <div id="landingContent">
            <h1 class="logo">Logo</h1>
            <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
            <button>Button</button>
        </div>
    </div>
</div>
<div id="footerNav">
    <div id="footerNavContent">
        <h1 class="logo">Logo</h1>
    </div>
</div>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
Hide result

/:

: ?

" "?

"bottom: 0" position: sticky, - ?

+8

: , , - . :

https://caniuse.com/#search=position%3A%20sticky

, : , . -, : .

<!doctype html>
    <html>
        <head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .footerNav {
            background-color: red;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="landing">
            <div id="landingContent">
                <h1 class="logo">Logo</h1>
                <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
                <button>Button</button>
            </div>
        </div>
    </div>
    <div class="footerNav">
        <div id="footerNavContent">
            <h1 class="logo">Logo</h1>
        </div>
    </div>
</body>

, , id = "footerNav" class= "footerNav". . , .

, , , , : 100vh , div. :

<!doctype html>
    <html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            height: 100vh;
        }

        #footerNav {
            background-color: red;
            position: relative;
            bottom: 0;
            width: 100%;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="landing">
            <div id="landingContent">
                <h1 class="logo">Logo</h1>
                <p id="landingParagraph">Lorem ipsum, paragraph content, etc etc.</p>
                <button>Button</button>
            </div>
        </div>
    </div>
    <div id="footerNav">
        <div id="footerNavContent">
            <h1 class="logo">Logo</h1>
        </div>
    </div>
</body>

, - .

-2

Source: https://habr.com/ru/post/1696205/

More articles:


All Articles