Css 100% Height With Padding/Margin

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {  display: block;  position:absolute;  height:auto;  bottom:0;  top:0;  left:0;  right:0;  margin-top:20px;  margin-bottom:20px;  margin-right:80px;  margin-left:80px;  background-color: green;}

<div class="stretchedToMargin">  Hello, world</div>

setting a margin or padding for a 100% height grid without scrollbars

Use padding instead of margin for selector .container.withMargin:

.container.withMargin {
    padding: 5px;
}

And add box-sizing: border-box for the .container selector.

function toggle() {
    document.querySelector(".container").classList.toggle("withMargin");
}

html,
body,
.container {
    height: 100%;
    margin: 0;
}

.container {
    display: grid;
    grid-template-rows: 50px 1fr 1fr;
    grid-template-columns: 300px 1fr 1fr;
    gap: 5px 5px;
    grid-auto-flow: row;
    grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
    background-color: black;
    box-sizing: border-box;
}

.main {
    grid-area: main;
    background-color: lightcoral;
}

.logo {
    grid-area: logo;
    background-color: lightcyan;
}

.header {
    grid-area: header;
    background-color: lightgoldenrodyellow;
}

.nav-one {
    grid-area: nav-one;
    background-color: lightgray;
}

.nav-two {
    grid-area: nav-two;
    background-color: lightgreen;
}

.container.withMargin {
    padding: 5px;
}

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <div class="container">
            <div class="main">
                <br />
                <button onclick="toggle()">toggle .container margin</button>
            </div>
            <div class="logo">logo</div>
            <div class="header">header</div>
            <div class="nav-one">nav one</div>
            <div class="nav-two">nav two</div>
        </div>
    </body>
</html>

HTML padding with 100% width and height?

if my thought is right you need to use box-sizing:border-box , Specify that elements should have padding and border included in the element's total width and height:

*{
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

please check this snippet

body {  margin:0;  padding:0;}.demo {  width:100%;  height:100vh;  float:left;  background:#000;  padding:5%;  box-sizing:border-box;}

<div class="demo"></div>

CSS height 100% with margin

Getting 100% height to work is tricky to get right cross browser—and you have to do it on the outermost element. My suggestion would be to try something like the code below, where the #wrap div is set to 100% height of the browser window and contains a .top div 200px tall with the same background color as the body element:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
html, body {
    height:100%;
} 

html,body {
    margin:0;padding:0;
}

#wrap {
    min-height:100%;
    background: red;
    width: 50%;
    margin: 0 auto;
}

* html #wrap {height:100%;}

.top {
    height: 200px;
    background: white;
}

</style>
</head>
<body>
<div id="wrap"> 
    <div class="top">
    </div>
    Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
</div>
</body>
</html>

100% Height Div with Margin or Padding Scrollbar Issue

Insert box-sizing:border:box, than it works.

*{
 box-sizing:border-box;
 }

100% height with margin while keeping width constraints for DIV in CSS

You can use absolute positioning to get the height right:

#child {
    position: absolute;
    top: 50px;
    bottom: 20px;
    left: 0;
    right: 0;
    width: 70%;
    min-width: 300px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

This requires adding position: relative to #parent but if it is the only child of the body then you can avoid it. This takes care of the which I don't want to change for some reasons part of your question.

Demo Here

Css 100% Height With Padding/Margin