Bollate

HTML

[ANSWERED] html – Stop pseudo elements from extending height of window

By

Nov 18, 2022 , ,

Solution 1 :

Just add overflow: hidden to your .angled-bottom. I would rather go with “contain: content”, but that’s not fully supported in Safari.

I also removed the bottom padding on said element.

:root {
  --dark-purple:    hsla(274, 64%, 10%,  1);
  --med-purple:     hsla(274, 45%, 20%,  1);
  --light-purple:   hsla(274, 45%, 35%,  1);
  --lighter-purple: hsla(274, 45%, 40%,  1);
  --light:          hsla(274, 5%,  95%,  1);
  --grey:           hsla(274, 5%,  55%,  1);
  --dark:           hsla(274, 5%,  5%,   1);
  --vertical-grad:      linear-gradient(180deg, #ff8f3e, #cf132c, #420d6e);
  --vertical-grad-r:    linear-gradient(0deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad:    linear-gradient(90deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad-r:  linear-gradient(270deg, #ff8f3e, #cf132c, #420d6e);
}

body {
  margin: 0;
  z-index: -1;
  margin: 0;
  position: relative;
  background-color: var(--dark-purple);
  font-family: sans-serif;
  font-size: 13pt;
  color: var(--light);
}

.angled-top::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(-5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-top {
  display: flex;
  padding: 2rem 4rem 9.5vw 4rem;
  justify-content: center;
  position: relative;  
}

.angled-bottom::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-bottom {
  display: flex;
  padding: 9.5vw 4rem 2rem 4rem;
  justify-content: space-around;
  position: relative;
  
    /* NEW */
  overflow: hidden;
  padding-bottom: 0;
}

.footer--column:nth-child(2) { transform: translate(0px, -2.5vw); }
.footer--column:nth-child(3) { transform: translate(0px, -5vw); }
<header>
      <div class="angled-top">
        [Header stuff here]
      </div>
    </header>
    
    <main>
      <div style="height: 70vh">... Simulate some large amount of content ...</div>
    </main>

    <footer>
      <div class="angled-bottom">
        <div class="footer--column">
          <h3>Sitemap</h3>

        </div>
        <div class="footer--column">
          <h3>Connect</h3>

        </div>
        <div class="footer--column">
          <h3>Recommended Sites</h3>

        </div>
      </div>
    </footer>

Solution 2 :

You can set overflow: hidden; on .angled-bottom. And maybe play with height with pseudo element.

:root {
  --dark-purple:    hsla(274, 64%, 10%,  1);
  --med-purple:     hsla(274, 45%, 20%,  1);
  --light-purple:   hsla(274, 45%, 35%,  1);
  --lighter-purple: hsla(274, 45%, 40%,  1);
  --light:          hsla(274, 5%,  95%,  1);
  --grey:           hsla(274, 5%,  55%,  1);
  --dark:           hsla(274, 5%,  5%,   1);
  --vertical-grad:      linear-gradient(180deg, #ff8f3e, #cf132c, #420d6e);
  --vertical-grad-r:    linear-gradient(0deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad:    linear-gradient(90deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad-r:  linear-gradient(270deg, #ff8f3e, #cf132c, #420d6e);
}

body {
  margin: 0;
  z-index: -1;
  margin: 0;
  position: relative;
  background-color: var(--dark-purple);
  font-family: sans-serif;
  font-size: 13pt;
  color: var(--light);
}

.angled-top::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(-5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-top {
  display: flex;
  padding: 2rem 4rem 9.5vw 4rem;
  justify-content: center;
  position: relative;
}

.angled-bottom::before {
  content: '';
  position: absolute;
  top: 0; right: 0; 
  /* changed */
  bottom: 10vh;
  left: 0;
  transform: skewY(-5deg) translateY(5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-bottom {
  display: flex;
  padding: 9.5vw 4rem 2rem 4rem;
  justify-content: space-around;
  position: relative;

  /* added */
  overflow: hidden;
}

.footer--column:nth-child(2) { transform: translate(0px, -2.5vw); }
.footer--column:nth-child(3) { transform: translate(0px, -5vw); }
<header>
      <div class="angled-top">
        [Header stuff here]
      </div>
    </header>
    
    <main>
      <div style="height: 70vh">... Simulate some large amount of content ...</div>
    </main>

    <footer>
      <div class="angled-bottom">
        <div class="footer--column">
          <h3>Sitemap</h3>

        </div>
        <div class="footer--column">
          <h3>Connect</h3>

        </div>
        <div class="footer--column">
          <h3>Recommended Sites</h3>

        </div>
      </div>
    </footer>

Problem :

I have an unexpected problem.

I love using pseudo elements now that I’m aware of them, and I’m using them to make a skewed header and footer without skewing the text inside of them. The header looks great and functions as I’d expect it to. Here is what I wanted / expected:

This is the expected behavior / what I want

However, this is what actually happened:

Unexpected behavior. The psuedo element pushes down the rest of the screen

Anyone know if there is a way to just remove the pseudo element from effecting the height of the page? Alternatively, what is the best solution to achieve the above picture?

NOTE: Using a script is a possibility, as I have other things I need to use JS for, but I’d prefer to not use it for appearance based things like this if I can. I get the feeling I could use a polygon instead, but I think the skew is nicer, as I can keep the angle consistent with the rest of the elements in the webpage, which is the whole point of this endevor in the first place. Here is some relevant code if you need a place to start tinkering from:

:root {
  --dark-purple:    hsla(274, 64%, 10%,  1);
  --med-purple:     hsla(274, 45%, 20%,  1);
  --light-purple:   hsla(274, 45%, 35%,  1);
  --lighter-purple: hsla(274, 45%, 40%,  1);
  --light:          hsla(274, 5%,  95%,  1);
  --grey:           hsla(274, 5%,  55%,  1);
  --dark:           hsla(274, 5%,  5%,   1);
  --vertical-grad:      linear-gradient(180deg, #ff8f3e, #cf132c, #420d6e);
  --vertical-grad-r:    linear-gradient(0deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad:    linear-gradient(90deg, #ff8f3e, #cf132c, #420d6e);
  --horizontal-grad-r:  linear-gradient(270deg, #ff8f3e, #cf132c, #420d6e);
}

body {
  margin: 0;
  z-index: -1;
  margin: 0;
  position: relative;
  background-color: var(--dark-purple);
  font-family: sans-serif;
  font-size: 13pt;
  color: var(--light);
}

.angled-top::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(-5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-top {
  display: flex;
  padding: 2rem 4rem 9.5vw 4rem;
  justify-content: center;
  position: relative;
}

.angled-bottom::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: skewY(-5deg) translateY(5vw);
  z-index: -1;
  background: linear-gradient(220deg, var(--light-purple), var(--med-purple));
}

.angled-bottom {
  display: flex;
  padding: 9.5vw 4rem 2rem 4rem;
  justify-content: space-around;
  position: relative;
}

.footer--column:nth-child(2) { transform: translate(0px, -2.5vw); }
.footer--column:nth-child(3) { transform: translate(0px, -5vw); }
    <header>
      <div class="angled-top">
        [Header stuff here]
      </div>
    </header>
    
    <main>
      <div style="height: 70vh">... Simulate some large amount of content ...</div>
    </main>

    <footer>
      <div class="angled-bottom">
        <div class="footer--column">
          <h3>Sitemap</h3>

        </div>
        <div class="footer--column">
          <h3>Connect</h3>

        </div>
        <div class="footer--column">
          <h3>Recommended Sites</h3>

        </div>
      </div>
    </footer>

Comments

Comment posted by robinspi

Ty @vanowm for your help

Comment posted by Temani Afif

overflow:hidden to .angled-bottom ?

Comment posted by robinspi

I could have sworn I tried that… oh well. Thanks for the help.

By

Related Post

HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022
HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022