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>

javascripthtmlcss

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract images from dynamically loaded JavaScript website

I'm attempting to extract images from a webpage that is rendered using JS, but the picture links in the source code are incomplete. Here is where the images are located: <script language="javascript" type="text/javascript"> </script> < ...

javascriptpython-3.xselenium-webdriverweb-scrapingbeautifulsoup

What could be causing the right padding to be overlooked next to the scroll bar, and what steps can be taken to address this

.outer { padding: 50px; } .inner { width: 500px; height: 1000px; border: 1px solid gray; margin: auto; } <div class="outer"> <div class="inner"> <div class="content">qwerty</div> </div> </div> From my ...

htmlcss

Creating a standard login.js file for seamless integration with nightwatch.js testing

When creating tests for my web application, I need to first simulate a login before proceeding with the rest of the tests to access inner pages. Currently, I am in the process of refactoring the code so that I can create an 'include' for common f ...

javascriptseleniumnpmnightwatch.js

Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...

cssreact-nativeexpogoogle-places-autocomplete

Linking this to a function that takes in arguments

I am currently working with an event handler that calls a fat arrow function to execute a specific method. import React, { Component } from 'react'; class App extends Component { sayHi = msg => { console.log(msg); }; render() { ...

javascriptreactjsthis

Tips on scrolling down to find the text you're looking for

I attempted to scroll downwards in my application's window using the following JavaScript code: ((JavascriptExecutor) driver).executeScript("windows.scrollBy(0,500)"); Additionally, I tried to ensure a specific element is in view with this script: ...

javascriptjavaseleniumselenium-webdriverscroll

Load CSS styles once the HTML content has been generated by the PHP script

One way to dynamically add a section of HTML during page load is by making use of PHP in the index.php file: In your index.php file, you can include a section like this: <html> <head> <link href="css/style.css" rel="stylesheet"> ...

phphtmlcssloading

Is it possible to update a Rails element using an AJAX request?

I've delved into a plethora of information regarding Rails, AJAX, and 5.1 Unobtrusive Javascript. It provides insight on how to handle AJAX calls in Rails with a .js file, for example. However, my goal isn't to serve up an entire .js file; rathe ...

javascriptruby-on-railsajax

Disable the button on smaller devices

I'm trying to make my button take up the full width on smaller screens like mobile devices. Here's what I have so far... Large Device https://i.sstatic.net/TJex1.png Medium Device https://i.sstatic.net/Hvkan.png Small Device https://i.sstatic ...

htmlcsstwitter-bootstrapbootstrap-5

Looking to create a custom loader that adapts to different screen sizes

Can anyone help me make the text in my centered div responsive on my website loader? I'm new to coding and struggling to figure it out. Any assistance would be greatly appreciated! Make sure to view the full page snippet so you can see the text prope ...

htmlcssresponsive

CSS: What is causing my three columns to divide?

I am encountering CSS issues while attempting to develop a React app using Next.js. Here is the content of my home.module.css: .grid_container { /* display: grid; */ /* grid-template-columns: auto auto auto; */ /* column-count: 3; align-items: fle ...

htmlcss

Issue encountered when integrating AJAX with PHP and HTML5 form

I've been working on solving a puzzle involving a contact form that uses AJAX and PHP. I decided to try reverse engineering the PHP code from this page (). However, when testing it out, the message gets stuck at "sending message...." after clicking "S ...

phpajaxhtmlcontact-form

Ways to apply CSS to a changing div ID

I am looking to apply CSS to a dynamically generated div ID. var status = var status = item.down().next().innerHtml(); if(status == "test") { var c = 'item_'+i ; c.style.backgroundColor = 'rgb(255, 125, 115)'; //'ite ...

javascriptjqueryhtmlcss

Utilizing Multiple MongoDB Connections in a Node.js Application

I am facing an interesting challenge in my Node.js project where I need to connect multiple MongoDB databases. Let me share with you my current setup and the issue that is causing me some trouble. Node Version: v6.12.1 Express.js Version: 4.16.2 Mongoos ...

javascriptnode.jsmongodbexpressmongoose

Error in Angular: Unexpected '<' token

After setting up my angular and express app using the angular-cli and express command lines, I successfully built the angular app with the ng build command. However, when attempting to serve it with the express server, I encountered the following error in ...

javascriptnode.jsangularexpress

Exploring the Reach and Sequence of AJAX Callbacks

This particular piece of code aims to achieve three main tasks: 1) validate the online status of users, 2) retrieve their information from a slightly different URL, and 3) present both sets of data in HTML format. The implementation appears functional bu ...

javascriptjqueryajaxasynchronouscallback

To validate any object, ensure that it contains a specific key before retrieving the corresponding value in typescript

When looking at a random object, my goal is to verify that it follows a certain structure. obj = {WHERE:{antherObject},OPTIONS{anotherObject}} Once I confirm the object has the key using hasProperty(key), how can I retrieve the value of the key? I thoug ...

javascriptjsonobjecttypescript

Is it possible to use only CSS to determine if text has wrapped and apply different styles to it?

Let's say we have a button with lengthy text: [Click here to find out more] Due to its length, the text may be split on smaller screens like this: [Click here to find out more] The goal is to align the text to the left when wrapped and to the ce ...

htmlcss

Using JSON data to render images onto a canvas

I am encountering an issue with a JSON array that I'm receiving from PHP. The array is indexed and has the following format (larger in real scenario) [ [ [17, 28, 1, "z"], [28, 31, 6, "b"], [8, 29, 6, "b"] ...

javascriptjsoncanvasdrawimage

"An undefined message will be displayed in AngularJS if there is no content

When the two textboxes are left empty, you will see errors as 'undefined' displayed. These errors disappear once content is entered. The code I have written looks like this: Default.aspx <div ng-app="Welcomecontroller" ng-controller="FullNa ...

javascriptangularjs