How to make a div the whole screen minus x pixels

Question

The navbar at the bottom is a set number of pixels. How do I make chart1 (the red background) cover everything above the navbar. Right now it says height of 95%, but on bigger screens the navbar is less than 5% and on smaller its greater than. Thanks for the help!

~IGNORE~ It won't let me submit because of mostly code so I have to add more writing... It won't let me submit because of mostly code so I have to add more writing... It won't let me submit because of mostly code so I have to add more writing... It won't let me submit because of mostly code so I have to add more writing... It won't let me submit because of mostly code so I have to add more writing... It won't let me submit because of mostly code so I have to add more writing... ~IGNORE END~

#chart1 {
    background-color:red;
    /* Height and width fallback for older browsers. */
    height: 95%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 95vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
    
}

.sideButton {
    position: absolute !important;
    z-index: 10 !important;
    transform-origin: bottom left;
    transform:rotate(7deg);
            -ms-transform:rotate(90deg); /* IE 9 */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(90deg); /* Safari and Chrome */
            -o-transform:rotate(90deg); /* Opera */
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
       
        
</head>
        <title>Stock Data - Highcharts</title>   
    </head>
    <body>
        <nav class="navbar fixed-bottom navbar-light bg-light compressed">
            <div class="navbar-brand">Control Panel</div>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse border-left" id="navbarSupportedContent">
                
            </div>
        </nav>
        
        <!-- Calls the chart -->
            
        <div id="chart1"></div>
        
        <!-- jQuery: for CSV import and other calls -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
       
   
        <!-- Bootstrap for the control panel -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        
        <!-- All the custom js for this page -->
        <script type="text/javascript" src="official_stock_chart.js"></script>  
        
    </body>
</html>

Possible duplicate of [Div width 100% minus fixed amount of pixels](https://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels) — Joseph Webber, Jun 21 '18 at 19:16
box-sizing and padding on parent can do the job without calc() or js, provide an html structure and css showing your issue. Then we can help efficiently. **Else, margin on its own is fine , setting width:100% or 100vw is a not a real good idea where blocks will always span avalaible width minus margins set and eventual padding on parent.** — G-Cyrillus, Jun 21 '18 at 19:25
I just added clarification. Sorry it took so long I was trimming down unnecessary code for clarity... — Hackerman, Jun 21 '18 at 19:55

score 6 · Answer 1 · answered Jun 21 '18 at 19:14

6

Have you tried CSS calc()?

height: calc(100% - 5px)

answered Jun 21 '18 at 19:14

Briley Hooper

1,271
6
16

score 0 · Accepted Answer · answered Jun 22 '18 at 07:54

This ended up working:

html, body {
    height: 100%;
}
#chart1 {
    height: -webkit-calc(100% - 40px);
    height:    -moz-calc(100% - 40px);
    height:         calc(100% - 40px);
    width: 100%;

    /* Remove any browser-default margins. */
    margin: 0;

}

The 'html,body' part is crucial, as without it, the height variable has no frame of reference as to what '100%' is; you have to work your way down the parent containers (body was as deep as I had to go, but you may have to go deeper if your div is more embedded).

How to make a div the whole screen minus x pixels

2 Answers2