css calc und min-height können nicht gut zusammenpassen

Question

ich baue ein Layout, das dynamische Höhe hat (wie die meisten Leute). Ich habe eine Weile gesucht, aber keinen ähnlichen Fall mit meinem gefunden. so ist es hier, meine vereinfachte Code:

html:

<div id="body"><div id="content"> 
content 
</div> 
</div> 
<div id="footer"> 
    abc 
</div> 

css:

#footer{ 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background: #ddd; 
} 
#body{ 
    padding: 60px 50px 70px 50px; 
    position: relative; 
    min-height: calc(100% - 130px); 
} 
#content{ 
    font-family: verdana; 
    margin-left: 200px; 
    border-left: 5px solid #ddd; 
    padding: 0 0 0 10px; 
    min-height: 100%; 
    min-width: 500px; 
} 
body{ 
    margin:0; 
    overflow-y:scroll; 
    height:100%; 
    position:relative; 
} 
html{ 
    height:100%; 
} 

das Problem ist, wenn ich diesen Code verwenden, wird die Inhaltshöhe nicht richtig berechnet und die Ergebnis sehen aus wie this fiddle während ich versuche zu tun ist, wenn der Inhalt kurz ist, sollte es wie this aussehen und wenn der Inhalt lang ist, sollte es wie this aussehen.

wenn ich ändern die min-height zu height, wenn der Inhalt kurz, ich bekommen, was ich wollte, aber wenn der Inhalt lange ist, bekomme ich this annoying layout

es scheint calc können die Höhe Attribut nicht lesen, wenn dies nicht der Fall angegeben (mit min-height), aber wenn die height angegeben ist, dann kann ich nicht dynamische Höhe, gibt es eine andere Lösung, um dies zu erreichen?

PS: , was ich versuche zu tun, um die Grenze von #content Strecken machen nach seinem Inhalt mit minimaler Höhe einer Seitenhöhe

Anmerkung:

einer andere seltsame Tatsache ist, tatsächlich arbeitet mein gegenwärtiger Code an spätestem Chrom und IE, aber habe dieses Problem auf spätestem firefox und Oper. Ich habe versucht, das Problem mit jsfiddle zu reproduzieren, und zu meiner Ehrfurcht, alle Browser haben das gleiche Problem, ich habe alle verwandten HTML und CSS (kopieren Sie die generierte HTML und CSS) zu jsfiddle nur um zu finden, dass mein Code ist überhaupt nicht funktioniert, bin ich sehr verwirrt

Answer 1

Warum nicht flex boxes verwenden? Es klingt wie Sie möchten sticky footer - das heißt, die Fußzeile befindet sich am unteren Rand des Ansichtsfensters, wenn der Inhalt nicht sehr hoch ist, aber es ist am unteren Rand des Inhalts, wenn der Inhalt die Höhe des Ansichtsfensters überschreitet. Dies ist dem holy grail Design sehr ähnlich. Hier ist eine HTML5 + CSS3-Lösung, die JavaScript nicht verwenden:

* { 
 
    /* 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>

Wenn Sie den Code nicht in eine Geige kopieren selbst, I've done that for you.Möglicherweise müssen Sie use some vendor prefixes, wenn Sie ältere Browser unterstützen möchten - Flex-Boxen sind relativ neu zum Schreiben dieses Beitrags.

Answer 2

Pro unsere Conv, Sie sind nach der Fähigkeit, die min-height so einstellen, dass es das Viewport mit Platz für die Fußzeile füllt, aber wie der Inhalt wächst, sollte der Inhalt div auch - Schieben Sie die Fußzeile nach unten.

* { box-sizing: border-box } 
html,body { height: 100%; padding: 0; margin: 0 } 
#content { min-height: 90%; outline: 1px solid blue } 
#footer { background: gray; height: 10%; } 

Es dauert nur Einstellung der Min-Höhe mit Prozentsätzen. Ich bin mit dem Rand-Box Box Sizing-Modus, der mit leichter zu arbeiten, ist aber nicht erforderlich, falls Sie ältere IE Pflege

fiddle