CSS Calc and Min-Height Can Not Team Up Properly

css calc and min-height can not team up properly

Why not use flex boxes? It sounds like you want a sticky footer - that is, the footer is at the bottom of the viewport when the content is not very high, but it is at the bottom of the content when the content exceeds the viewport height. This is very similar to the holy grail design. Here is an HTML5+CSS3 solution that does not use JavaScript:

* {    /* personal preference */    margin: 0;    padding: 0;}html {    /* make sure we use up the whole viewport */    width: 100%;    height: 100%;    /* for debugging, a red background lets us see any seams */    background-color: red;}body {    /* make the body a vertical flex container */    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */    display: flex;    flex-direction: column;    /* make sure we use the full width but allow for more height */    width: 100%;    min-height: 100%; /* this helps with the sticky footer */}main {    /* Allow the content to grow but not shrink */    flex-grow: 1;    flex-shrink 0;    /* for debugging, a blue background lets us see the content */    background-color: skyblue;}footer {    /* do not allow the footer to shrink */    flex-shrink: 0;    /* for debugging, a gray background lets us see the footer */    background-color: gray;}

<main>    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>    <p>This is the content.</p>    <p>This is the content.</p>    <p>This is the content.</p>    <p>This is the content.</p>    <p>This is the content.</p>    <p>This is the content.</p>    <p>This is the content.</p>    <p>This is the content.</p>    <p>This is the content.</p></main><footer>    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>    <p>This is the footer.</p></footer>

height: calc(100%) not working correctly in CSS

You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.

Following CSS works:

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.

Here's an updated fiddle

http://jsfiddle.net/UF3mb/10/

Browser support is:
IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+

Height not working while setting it with calc() in stylus

I think you need a wrap div around the element that you are trying to set a width for. This will make sure that the element has a set starting point for percentages if you give this wrap a height too. I demonstrate it in this snippet.

.ht-wrap {  padding-top:20px;  display;inline-block;  height:280px;  background-color:blue;}
.ht-full-70 {  padding:6px;  display;inline-block;  height: calc(100% - 70px) !important;  background-color:red;}

<div class="ht-wrap">  <div class="ht-full-70">    <p>Text.</p>  </div></div>

CSS: min-height: min-content fails to override height

From the specification:

min-content

Use the min-content size in the relevant axis; for a box’s block size, unless otherwise specified, this is equivalent to its automatic size.

Then for "automatic size":

For min-width/min-height, specifies an automatic minimum size. Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0.

So min-height: min-content will resolve to min-height: 0. In other words, it has no effect.

---

Related Topics