Menu
Situation:
Given the following simplified HTML example:
I was able to do this but when I have html and body both set it's overflow-x property to hidden those links in the footer are not clickable.
Update to situation:
I know that it's possible to set z-indices for #content to 2 and for footer to 1 to make the links clickable, but that interferes with a multizoom.js from a different part of the page and is not of my interest.
Question:
What has setting overflow-x to both html and body to do with the links in the footer? And why must both elements set this property? (If just one of them omits overflow-x the links are clickable)
In fact for me it's no problem anymore not to set overflow-x in the originating project because it was a leftover from an outdated styling attempt and has been removed already. But I am curious why there's such a strange behaviour?
Example:
/* This statement prevents the links in the footer
* from being clickable */
html, body {
overflow-x: hidden;
}
/* necessary statements to put footer behind content and
* make it bottom sticky behind content */
#content {
/* opaque bg color to block out footer*/
background: lightgrey;
/* border bottom to see where content ends */
border-bottom: 1px solid black;
/* arbitrary height as content placeholder to provoke scrolling */
height: 1500px;
/* use margin to stretch the page in order for
* footer to become visible at the end of scrolling */
margin-bottom: 120px;
}
footer {
/* bg color to distinguish footer from content */
background: grey;
/* make footer 120px high, centered */
padding: 50px;
line-height: 20px;
text-align: center;
/* put footer one layer behind content so that content scrolls
* before footer while footer itself is fixed at the bottom */
z-index: -1;
position: fixed;
bottom: 0;
/* use all the width possible */
width: 100%;
}
body {
/* make page use the whole panel */
margin: 0;
}<html>
<body>
<div id="content">
Here is the content, scroll down until end of page
</div>
<footer>
<a href="#">Here is the footer link (not clickable at the moment)</a>
</footer>
</body>
</html>
578
As I can see its about margin collapsing. Your #content has margin-bottom: 120px it produces blank space at the bottom, and overflow: hidden; produces new formatting context which allows body to be same height as #content block. z-index: -1 pushes footer behind body in this case and you can't click link.
But when you remove overflow property, body will have smaller height than #content because of margin-bottom and #footer became outside of body and after that links become clickable.
Also note that overflow property on viewport does not clip fixed elements which are out of parent, that's why #footer remains visible and active.
176
What has setting overflow-x to both html and body to do with the links in the footer? And why must both elements set this property? (If just one of them omits overflow-x the links are clickable)
In fact for me it's no problem anymore not to set overflow-x in the originating project because it was a leftover from an outdated styling attempt and has been removed already. But I am curious why there's such a strange behaviour?
As you said it will work when you remove style from html.
Why do people style html tag?
For now I have encountered at least three cases in which people style html.
When they want to force browser to display scrollbar.
html, body {
min-height: 100.1%;
}
When they want to make table out of the page.
We can style html because it is DOM element which takes normal attributes (W3 on html), but I, and as far as I know a lot of other people, strongly suggest to avoid using it, unless you want to do some cool tricks with it. Styling html may lead to unwanted behaviour due to the way browsers work. Keep in mind that body is not the only child of html. There is also head. When you want to style the visible part of your page you have got body for it (why would you style invisible part in first place?).
29
The problem seems to be that the footer has a negative z-index and the body doesn't have any (so defaults to 0?). Putting overflow-x: hidden into the body's css statement extends the body over the footer (see t1m0n's answer for the reason why).
Adding a lower z-index to the body and making it relatively positioned fixes the problem on Chrome, IE, Firefox and Edge.
body {
position: relative;
z-index: -2;
}
/* This statement prevents the links in the footer
* from being clickable */
html, body {
overflow-x: hidden;
}
body {
position: relative;
z-index: -2;
}
/* necessary statements to put footer behind content and
* make it bottom sticky behind content */
#content {
/* opaque bg color to block out footer*/
background: lightgrey;
/* border bottom to see where content ends */
border-bottom: 1px solid black;
/* arbitrary height as content placeholder to provoke scrolling */
height: 1500px;
/* use margin to stretch the page in order for
* footer to become visible at the end of scrolling */
margin-bottom: 120px;
}
footer {
/* bg color to distinguish footer from content */
background: grey;
/* make footer 120px high, centered */
padding: 50px;
line-height: 20px;
text-align: center;
/* put footer one layer behind content so that content scrolls
* before footer while footer itself is fixed at the bottom */
z-index: -1;
position: fixed;
bottom: 0;
/* use all the width possible */
width: 100%;
}
body {
/* make page use the whole panel */
margin: 0;
}<html>
<body>
<div id="content">
Here is the content, scroll down until end of page
</div>
<footer>
<a href="#">Here is the footer link (IS CLICKABLE NOW!!)</a>
</footer>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
