Maintain a consistent header height with CSS even when using the calc() function

--dis: calc(var(--max-height) - var(--min-height));
/*
  @media large{--min-height:13rem};
  @media small{--min-height:6.5rem};
  --max-height:75vh;
*/

--percent: calc(var(--scroll-ani) / var(--dis));
/* 
  in js: document.body.style = "--scroll-ani:" + document.scrollingElement.scrollTop; 
  This code will correctly output the distance between the top of the visual area and the top of the page
*/

--percent-limited: calc((var(--percent) - 1 - abs(var(--percent) - 1)) / 2 + 1);
/*
  If percent > 1, percent-limited = 1,
  If percent < 1, percent-limited = percent,
  Percent cannot be less than 0.
*/
obj{
  position: fixed;/* header itself will not cause the page height to change*/
  width:100vw;
  height: calc(var(--max-height) - var(--dis) * var(--percent-limited));
}

Despite these calculations, the height does not change.

The variable --percent-limited operates as follows: It represents the function y=(x-1-abs(x-1))/2+1

Since x can never be less than 0, the range of y is [0,1]

Answer №1

When using the CSS calc() function, remember that multiplication can only be done when at least one side is without units.

In the following CSS code snippet, you'll notice that performing multiplication is not possible:

height: calc(var(--max-height) - var(--dis) * var(--percent-limited));

For more information on how to use the calc() function in CSS, check out this CSS tricks article.

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

The background image fails to display on the button

Why isn't the background image for my button appearing when set using a CSS rule? I have a button with the class "todo" and although other parts of the rule work, the image itself does not show up even after trying "background: url" and "background-im ...

Unable to get HTML text input validation with RegEx to function, despite incorporating the required attribute

I am attempting to create dynamically generated text inputs that only allow for digits and an optional decimal point. I have added the required attribute but the inputs are not responding to the RegEx pattern. var howMuch = $("<input>").attr("type", ...

When making a PUT request with Fetch, the Cache-Control header is altered in Firefox but remains unchanged in

In the process of generating presigned URLs for uploading to S3, it is necessary to set the Cache-Control header value to be public, max-age=31536000, immutable. The fetch operation is executed using the following code: fetch( uploadUrl, ...

Strange behavior observed with Nuxt Js asyncData method returning values

Currently, I am engaged in a project using nuxt js/vue js. The project requires me to interact with multiple REST APIs. To accomplish this task, I am utilizing the asyncData() function provided by nuxt js to make the API calls within the page component. i ...

Headline at the top of the page, perfectly centered with a division below

Trying to create an effect where there is a div that is centered both vertically and horizontally within a dynamic containing div. This can be achieved with the following CSS: #centered-div { vertical-align: middle; margin: auto; } However, I als ...

Order a portion of a JSON array according to another part of the same array

Having a json array that needs sorting in JavaScript. The EventName field should match the respective Age fields like 01-10 Days and 10-20 Days. [ {Age: "01-10 Days", EventName: "Invoice AP Review", Value: 1, ActiveInvoices: []} ,{Age: "01-10 Days", Even ...

The retweet option is missing from Twitter Web Intents

I am trying to implement Twitter Web Intents to display modal windows for actions such as "Like" and "Retweet". Following the instructions from https://developer.twitter.com/en/docs/twitter-for-websites/web-intents/overview, my code looks like this: <h ...

The content within a select tag is experiencing vertical misalignment

The select tag on my page is behaving oddly - when there is a value in it, it is aligned to the bottom vertically. Upon inspecting the CSS, I noticed that the only styles applied are font size and type. Strangely, removing the doctype from the page resol ...

Adjusting the size of a division element to match the dimensions

Currently, I am still in the process of finalizing the remainder of the page, but I have encountered a minor issue. The problem lies in my image div not matching the height of the container. Although the image itself is the correct size, the image div appe ...

Positioning of bottom navigation bars

Is there a way to ensure that the bottom navigation bar remains fixed at the bottom of the screen, regardless of the device's screen size? position: absolute; bottom: 0; width: 100%; While this solution works, it has been observed that when th ...

Guide to adding directional arrow indicators on the Y and X axes of a ChartJS graph

https://i.sstatic.net/ZKkXT.png Is it possible to add directional arrows on the Y and X axis of a ChartJS graph? I'm seeking advice or tips on how to achieve this. Below is the code snippet for creating the chart. var ctx = $("#mycanvas"); ...

What could be the reason for the undefined value of my ID retrieved from the next JS router.query upon page refresh?

When using the id obtained from the next router.query to dynamically render elements, it works fine when accessing the room from next/link. However, upon refreshing the page, an error is thrown. https://i.stack.imgur.com/yEjGS.png Below is the code snipp ...

I am experiencing an issue with my Angular directive where the button click does not

Check out this page for guidance on adding a div with a button click in AngularJS: How to add div with a button click in angularJs I attempted to create an angular directive that should add a div to my HTML page when a button is clicked. However, upon cli ...

Unable to properly export the HTTP server for socket.io communication

I am facing an issue with my app.js const express = require('express'); const app = express(); const server = require('./server.js'); // app.use const io = require('socket.io').listen(server); io.on('connection', f ...

An npm list is always full of modules

As I prepare to install a package using npm, I noticed that my folder for the new project already has numerous items listed when I run npm list. Is it normal for the folder not to be empty at this stage? Have I made an error somewhere? ...

Obtaining page information from a frame script in e10s-enabled Firefox: A guide

One of the challenges I'm facing is with my Firefox extension, where a function loads page information using the following code: var title = content.document.title; var url = content.document.location.href; However, with the implementation of multi- ...

jQuery Waypoints Error: The sticky functionality is missing and cannot be utilized in this context

Trying to anchor an element at the top of a WordPress page using the jQuery Waypoints plugin. <script src="path/to/waypoints.min.js"></script> <script> $('#myelement').waypoint('sticky'); </script> However, t ...

Is there a method to change the name of a file and have it automatically updated in all other locations where it is referenced?

I need to change the name of an HTML file within Visual Studio Code, but this file is referenced in multiple other files. Is there a quick way to do this? Are there any shortcuts that will let me rename the file and automatically update all references in ...

Implementing a loading animation effect using AJAX that requires a loop delay and sleep functionality

My jquery ui dialog is loaded via ajax with a partial view from the server. Initially, the dialog opens as a dialog-ajax-loader and then animates/grows to fit the content once the call returns. The issue arises when the dialog content gets cached or the a ...

The feature of interpolation within attributes has been eliminated. Please use either v-bind or the colon shorthand in its place

I am struggling to grasp how I can pass a value to Vue using HTML. I keep encountering this error message: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. Edit: I am trying to pass the value "country" to the Vu ...