Can a Div Fill Up The Entire Viewport with a Pixel-Based Margin, Not Using The CSS3 Calc Property

Can a div fill up the entire viewport with a pixel-based margin, not using the CSS3 calc property?

For the width you don't need to do anything since it will by default take all the space. And for height you can consider padding on the body and use height:100%

html,body {  height: 100%;  margin: 0;  overflow: hidden;}body {  padding: 13px 0;  box-sizing:border-box;}div {  background: linear-gradient(red, yellow);  height: 100%;  margin: 0 13px;}

<body>  <div></div></body>

How to make div height and width to full screen with specific margin without scroll

Option 1: use calc():

body {  margin: 0;}div {  height: calc(100vh - 20px);  width: calc(100vw - 20px);  margin: 10px;  background-color: red;}

<div></div>

Div width 100% minus fixed amount of pixels

You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div element is auto, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.

Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.

The HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

The CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

How to make the main content div fill height of screen with css

These are not necessary

remove height in %
remove jQuery

Stretch div using bottom & top :

.mainbody{
    position: absolute;
    top: 40px; /* Header Height */
    bottom: 20px; /* Footer Height */
    width: 100%;
}

check my code : http://jsfiddle.net/aslancods/mW9WF/

or check here:

body {    margin:0;}
.header {    height: 40px;    background-color: red;}
.mainBody {    background-color: yellow;    position: absolute;    top: 40px;    bottom: 20px;    width:100%;}
.content {    color:#fff;}
.footer {    height: 20px;    background-color: blue;        position: absolute;    bottom: 0;    width:100%;}

<div class="header" >     </div><div class="mainBody">         <div class="content" >Hello world</div></div><div class="footer">     </div>

Maintain aspect ratio of div but fill screen width and height in CSS?

There is now a new CSS property specified to address this: object-fit.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

The feature is widely supported by now (http://caniuse.com/#feat=object-fit).

How to use CSS calc() with an element's height

I think you are trying to run script in a css syntax, which is NOT POSSIBLE.

calc() can do basic math operation with absolute values, it cannot find the height of an element and then perform math on it.

How can an html element fill out 100% of the remaining screen height, using css only?

The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

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>

Is it possible to use vh minus pixels in a CSS calc()?

It does work indeed. Issue was with my less compiler. It was compiled in to:

.container {
  min-height: calc(-51vh);
}

Fixed with the following code in less file:

.container {
  min-height: calc(~"100vh - 150px");
}

Thanks to this link: Less Aggressive Compilation with CSS3 calc

Setting width/height as percentage minus pixels

You can use calc:

height: calc(100% - 18px);

Note that some old browsers don't support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Can a Div Fill Up The Entire Viewport with a Pixel-Based Margin, Not Using The CSS3 Calc Property