CSS calc() function is not working

Published at 2024-08-28 11:53:11Viewed 108 times

Professional article

Please reprint with source link

When I was writing styles of affix, whose width needs to be set by the calc function of CSS

.fix {
  position: fixed;
  top: 20px;
  width: calc(100%-20px);

}

However, the width is not working and the calc function fail to calculate the resulting px. After searching for this problem, I finally found out that the calc function should be written like the following

.fix {
  position: fixed;
  top: 20px;
  width: calc(100% - 20px);

}

That is, two whitespaces need to be reserved before and after the arithmatic operator.

0 人喜欢

0 0 0

Comments

There is no comment, let's add the first one.

弦圈热门内容

[antd: Message] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.

I'm getting this error when using MessageWarning: [antd: Message] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.Here is my code:import { message } from 'antd'; export default function Page() { const [messageApi, contextHolder] = message.useMessage(); const res = await fetch("/api/...", { method: "POST", }); if (!res.ok) { messageApi.error("Error! Fail to login!"); } return ( <Home> ... </Home> ) }

Supervised and Unsupervised learning in machine learning

Machine learning is a subject of artificial intelligence, which means programming computers in terms of algorithm so that they can learn from data. Supervised learning and unsupervised learning are two types of Machine Learning systems. One can easily tell the difference between them by the criterion: whether or not they are trained with human supervision. Supervised learning and unsupervised learning are two extreme. The former completely depends on human supervision, while the latter doesn't n ...

AI: Deep Learning vs Machine Learning

In the previous article Supervised and Unsupervised learning in machine learning, we explains the meaning of machine learning. As AI is making waves across industries, we often hear the terms "deep learning" and "machine learning" getting thrown around interchangeably. While both are crucial for AI advancements, they are indeed two different subjects with distinct characteristics. Deep learning is a branch of machine learning, whose methods are based on artificial neural networks (ANNs). In othe ...

An introduction to different branches of mathematics

The note is mainly a sketch of basic knowledge concerning general topology, differential geometry, functional analysis, algebraic geometry, etc., starting from a discussion of Euclidean spaces. However, there maybe some mistakes in the note, so use at your own risk. For simplicity, some details are omitted and can be found in the references provided. Further materials concerning algebraic geometry, especially arithmetic algebraic geometry, can be referred to another note written by the author, N ...

How to do syntax highlighting for code blocks in Nuxt?

Do you also want to highlight the code block in your website like other platforms? There are two Javascript libraries that help you acheive syntax highlighting. They are Prism.js and highlight.js. In this tutorial, we will show how to use Prism.js to do syntax highlighting with Nuxt.js.First, you can use npm to install PrismJS:npm install prismjsNext, go to composables directory and create a new file prism.js which looks like:import Prism from 'prismjs' import 'prismjs/themes/prism-tomorrow.css' ...

How to setup PrismJS and Autoloader plugin with Nuxt 3?

In previous the article Mathjax loads slow. How to load local JS file with Nuxt?, we explain how to render math equations in Nuxt.js using local CDN. With local CDN, we could easily load many Javascript libraries without slowing down our page loading.PrismJS is a light Javascript library that highlights the code blocks on your pages. In the ordinary way that setup PrismJS (see How to do syntax highlighting for code blocks in Nuxt?), you need to import the file of almost every language that you n ...

How to find similar strings with python?

Suppose that we have a string str together with a list of strings arr = [str1, str2, ... ]. How to find similar string of str in arr? To do this, we can calculate the similarity of str and elements in arr one by one. But how to calculate the degree of similarity between str and an element in arr? First, we need a measurement of the similarity of two strings. In fact, there are many methods that measure the similarity of strings. In this tutorial, we will use python to find similar strings of str ...

Django use icontains with in for field lookup

In Django, __icontains and __in are field lookups to the QuerySet methods. __icontains is a case-insensitive containment test, and __in means that the field is in a given iterable. So I would like to do the following lookup:keywords = ['How', 'to', 'setup', 'PrismJS', 'and', 'Autoloader', 'plugin', 'with', 'Nuxt', '3?'] #Possible keywords of title Writings.objects.filter(title__icontains__in=arr)Unfortunately, we can not combine field lookups in Django. To implement our desire, we can use Q() ob ...

Mathjax loads slow. How to load local JS file with Nuxt?

In How to render math in Vue or Nuxt?, we explain the way to use Mathjax to render beautiful math formula in Nuxt.js. However, using CDN to load Mathjax is easy, but it degrades the performance of our pages. In other words, Mathjax may load slow if it is loaded by CDN.One of the solutions is to load Mathjax locally. You can use npm to install Mathjax to your project. npm install mathjax@4.0.0-beta.6However, it is difficult to integrate with Mathjax in Nuxt. Not only because there is little infor ...

VSCode error: To enable project-wide JavaScript/TypeScript language features, exclude large folders...

I'm using VSCode to write my Nuxt app. My VSCode was fine before, but it suddenly starts to continuously show me the error :Restarting the VSCode did not make any difference. And all my installed plugins failed, reinstalling the plugin also didn't work. Judging by the hint of VSCode, I realized that I had changed my public directory, which caused this error. Therefore, I tried to add public directory to my exclude list in tsconfig.json :{ // https://nuxt.com/docs/guide/concepts/typescript "e ...

How to render math in Vue or Nuxt?

There are several ways to write and render beautiful math on web. However, some methods can't be directly applied to Vue.js/Nuxt.js. In this article, we will explain how to use katex and mathjax to render math in Vue.js/Nuxt.js.KatexTo automatically render all math in all the pages, you need to use CDN to load katex : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/poem-studio-favicon-black.svg" ...

Nginx is installed but command not found

Problem. I installed nginx on my Debian 12 server following the steps in the official documentation Installing NGINX Open Source | NGINX Documentation. At first, everything is OK😇. Running sudo nginx -v returns the correct version of nginx.However, recently, when I ran the same command, it returned command not found:sudo nginx sudo: nginx: command not found nginx bash: nginx: command not foundEither sudo nginx or nginx gives the same result😣.Solution. To solve this problem, first you need to de ...

Frontend

Manitori