html/css how if child is greater than body and if not

Question

My HTML is as minimal as possible, moreover a content of id „content” is generated in JavaScript.

h1 has a static height based on font-size but I’d like to modify this (in css) if necessary, and at times h2 is showed, at times not.

Is it possible to set content= body - h1 height - h2 height, but if content > body height, then spread body? Without any external libraries.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles/main-styles.css">
  <link rel="icon" type="image/png" href="./favicon.png" />
  <link rel="apple-touch-icon" type="image/png" href="./favicon.png">
  <link rel="stylesheet" href="#" id="custom-css">
  <base href="./">
  <title>Perfume Finder</title>
</head>

<body>
  <h1>Perfume Finder</h1>
  <h2 id="txt-title"></h2>
  <div id="content">
  </div>
  <script type="module" src="./modules/script.js"></script>
</body>

</html>

Please rewrite this `content= body - h1 height - h2 height, but if content > body height, then spread body` it does make any sense — mplungjan, Jan 21 '23 at 12:48
If you mean select sibling then [read this](https://stackoverflow.com/a/8828731/128761). — vee, Jan 21 '23 at 13:29
I meant "it does **NOT** make any sense " - so please do rewrite it — mplungjan, Jan 21 '23 at 14:37

score 0 · Answer 1 · answered Jan 23 '23 at 12:59

So what I think you might need are "css functions", you can use the calc() function to kind of do what you want. I couldn't really understand what you were asking for in terms of the calculations themselves. But here are a few links on where to start: https://css-tricks.com/complete-guide-to-css-functions/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions

Hope it helps

html/css how if child is greater than body and if not

1 Answers1