margin-top: automatic adjustment, with a minimum of 50 pixels

Question

margin-top: automatic adjustment, with a minimum of 50 pixels

I am trying to add a minimum of 50px margin to the top of my footer tag using CSS, but I haven't been successful with the min() function. I'm not sure if I am overlooking something or if there is another correct approach to achieve this.

* {
    --red: #f70000;
    --gold: #caa866;
    --blue: #004d96;
    --BGblue: #004d96ef;
    --white: rgb(230, 230, 230);
    --traswhite: rgba(235, 235, 235, 0.5);
    --black: rgb(20, 20, 20);
    --trasblack: rgba(20, 20, 20, 0.6);
    --warning: #CC3300;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    transition: all ease-in-out 0.3s;
}

footer {
    display: flex;
    flex-direction: row;

    margin-top: 50px;

    width: 100%;
    height: 200px;

    background-color: var(--black);

    transition: all ease-in-out 0.3s;
}

<footer>
  <p style="color: white">content in the footer</p>
</footer>

javascript html css

Answer 1

Answer №1

To ensure the footer always stays at the bottom of the page, with a minimum distance of 50px from the main content or at the bottom of the viewport, you can utilize the position:sticky property. Here is an example of how to achieve this:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: #eee;
}

section {
  border: 2px dotted red;
  padding: 10px;
}

footer {
  display: flex;
  flex-direction: row;
  position: sticky;
  top: calc(100% - 200px);
  height: 200px;
  margin-top: 50px;
  background-color: black;
  color: white;
}

<section contenteditable="true">
  I am content-editable. Type in here to simulate what happens with more page content.
</section>
<footer>
  elements in the footer
</footer>

Answer 2

To ensure the footer always stays at the bottom of the page, with a minimum distance of 50px from the main content or at the bottom of the viewport, you can utilize the position:sticky property. Here is an example of how to achieve this:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: #eee;
}

section {
  border: 2px dotted red;
  padding: 10px;
}

footer {
  display: flex;
  flex-direction: row;
  position: sticky;
  top: calc(100% - 200px);
  height: 200px;
  margin-top: 50px;
  background-color: black;
  color: white;
}

<section contenteditable="true">
  I am content-editable. Type in here to simulate what happens with more page content.
</section>
<footer>
  elements in the footer
</footer>

margin-top: automatic adjustment, with a minimum of 50 pixels

Answer №1

Similar questions

Guide to declaring variables using jQuery

Unable to delete a row from a dynamically generated table using jQuery

Setting up a React Package by reinstalling a git repository

Recoil: Executing a function when an atom is modified

Children can easily access multiple items within a list by using the ul tag

Display the current count of selected radio buttons in real-time

jQuery has the ability to generate the initial dynamic page prior to running any functions

The overflow-x property causes the left side of the component to be cut off when scrolling

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Having issues with displaying options in Select2 within a Vue Component?

What is causing the "unable to resolve dependency tree" error when using ng new newApp?

Encountering a 404 error in Angular MVC project while trying to load a

I can view the data retrieved in the console, but I am having difficulty displaying it on the screen

Executing MongoDB collection operations with array filtering

Selenium is unable to interact with iframes

Using jQuery to dynamically load custom post type data in WordPress upon clicking

Tips for saving/downloading generated QR codes in React Native

Executing a Function Prior to onClick Event of a Link Element in Next.js

Updating Button Text with PHP on WooCommerce

Dynamic color change in SVG