0

I have the following HTML file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body style="margin: 0">
        <div style="background-color: #1a1b26; height: 100vh">
            <div
                style="
                    background-color: #16161e;
                    color: #0db9d7;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    padding: 8px;
                    font-family: Arial, Helvetica, sans-serif;
                "
            >
                Header goes here
            </div>
            <div style="padding: 8px; height: 100%">
                <div
                    style="
                        background-color: #16161e;
                        color: #0db9d7;
                        padding: 8px;
                        margin: 8px;
                        border-radius: 8px;
                        height: 100%;
                        font-family: Arial, Helvetica, sans-serif;
                    "
                >
                    {Nested Container}
                </div>
            </div>
        </div>
    </body>
</html>

I would like to have a page, containing a div that limits everything to the viewport height. Then, I would like to add a header with a constant height (to prevent squishing the contents inside, wouldn't flex or % squish the text if the screen height is too small?).

Then I would like to have a div that will fill the remaining space in the 100vh, I've tried height:100%, and it overflows down. Is there a way for this, while avoiding calc()?

The following is the jsfiddle I've added to show the displayed result: https://jsfiddle.net/ChronoAero/mqn081cw/

Thanks.

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
ChronoAero
  • 135
  • 1
  • 8
  • Do you mean having a header with 5vh then main content filling the rest of the viewport height as 95vh? To total 100vh; – Harley Swift Apr 14 '22 at 19:38
  • Why do you want to avoid `calc`? – Kameron Apr 14 '22 at 19:38
  • @HarleySwift, I would like to have a header with a constant pixel height, something like height:32px, perhaps – ChronoAero Apr 14 '22 at 19:39
  • You're probably better off with a CSS grid with two rows `auto` and `1fr`, placing you header in row 1 and your content in 2. Then 100% height will work. Perhaps also change those generic divs to more semantic elements like `
    ` and `
    ` or something.
     – somethinghere Apr 14 '22 at 19:43
  • @Kameron, I might consider it if it is the only way... are these functions totally safe to use in CSS? – ChronoAero Apr 14 '22 at 19:44
  • @ChronoAero of course they are. – Kameron Apr 14 '22 at 19:45
  • 1
    @somethinghere, thanks, might try that as well. I actually rewrite the project as plain html to simplify the query. I actually use a framework and named components accordingly. – ChronoAero Apr 14 '22 at 19:46
  • 1
    I tried it in your fiddle: https://jsfiddle.net/9cowdbsy/ - But theres a lot more to learn here I think. Paddings, for example, get added to height unless you add box-sizing. Also, this is **not** the best way to add CSS to your site. Consider using a seperate style tag, because mixing your contents and styling so tightly is going to cause you headaches a little down the line... – somethinghere Apr 14 '22 at 19:47
  • Remove `height: 100%;` from third div. Then you can set the `height` on the nested container div as `height: calc(100vh-32px);` https://jsfiddle.net/kameronmayers/23snkaqg/ – Kameron Apr 14 '22 at 19:50
  • @Kameron Although that works, in this case that seems unnecessarily hard-coded. I would really focus on the flexbox/grid route to keep you options open in case you need to add things of which you might not be able to fully calculate the size on the fly. – somethinghere Apr 14 '22 at 19:55
  • 1
    @somethinghere What do you mean by "unnecessarily hard-coded"? If the OP would have specified they want a solution with `grid` or `flex` I would have incorporated it. I do, however, appreciate the advice. – Kameron Apr 14 '22 at 19:59
  • 1
    @Kameron The 32px is based on the current size of the text in the header, but as the font-size changes (be it through accessibility or by the developers choice), this will start looking off, and not scaling up. It's technically not really responsive then. Anyways, that would be my main reason to avoid it in this case. – somethinghere Apr 14 '22 at 21:02

0 Answers0