CODEWITHSUNDEEP
htmlcss
Keaire
Keaire

Reputation: 899

Make container go slightly above the footer

I have a container with mainly all the content of the page with a fixed width (so not 100%) and I have a footer at the bottom that is width:100%.

I want to make that part of the container go above the footer, and that's what I came with:
https://jsfiddle.net/84weu9nz/

Doing that, as you can notice, footer content is no longer clickable or selectable, due to z-index. I could set the container to have a relative position, like https://jsfiddle.net/rLmuq2of/, but the problem of that solution is that I can't make the whole content of the page inside a position:relative element, some popups or some functionality inside that element may have unexpected behaviours, so I don't think it is a good practice.

Any solution? Thanks.

Upvotes: 0

Views: 40

Answers (2)

user1403588
user1403588

Reputation: 804

I managed to do this using power of flex but I am not sure if it is really a nicer solution.

I reversed order of columns/elements using css flex-direction: column-reverse, then put main div using order to first position again order: 1 (default order is 0).

.app {
  display: flex;
  flex-direction: column-reverse;
}

main {
  background-color: red;
  width: 400px;
  margin: 0 auto;
  order: 1;
}

footer {
  background-color: green;
  padding-top: 20px;
  margin-top: -20px;
}
<div class="app">
  <main>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </main>
  <footer>
    <li><a href="#">#1</a></li>
    <li><a href="#">#2</a></li>
    <li><a href="#">#3</a></li>
  </footer>
</div>

Upvotes: 0

Jan
Jan

Reputation: 2853

One solution i can think of is to use the css-rule for pointer-events, as long as you dont have any clickable-content in the main-element:

main {
  pointer-events: none;
}

If you have clickable elements inside your main-element, then you must extend the rules:

main {
  pointer-events: none;
}
main * {
  pointer-events: all;
}

Example

main {
  position: relative;
  background-color: red;
  width: 400px;
  margin: 0 auto;
  pointer-events: none;
}

main * {
  pointer-events: all;
}

footer {
  background-color: green;
  padding-top: 20px;
  margin-top: -20px;
}
<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <a href="#">clickable element</a> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</main>
<footer>
  <li><a href="#">#1</a></li>
  <li><a href="#">#2</a></li>
  <li><a href="#">#3</a></li>
</footer>

Upvotes: 1

Related Questions