Beschränken Sie die Höhe des Kindes auf das, was im Elternteil übrig ist

-1

Ich versuche, die Höhe des Ansichtsfensters auf zwei Divs aufzuteilen. Innerhalb des oberen div habe ich ein kleines div und dann ein größeres div, das ich scrollen möchte, wenn es nicht in das passt, was vom div übrig ist. Hier ist die Struktur meiner HTML und CSS (ein längeres Beispiel mit mehr Sachen in den divs ist in der verknüpften JSFiddle).Beschränken Sie die Höhe des Kindes auf das, was im Elternteil übrig ist

<body> 
    <div class="half-col" style="background: lightgreen;"> 
    <div style="border:solid 1px;"> 
     <span>Small amount of stuff</span> 
    </div> 
    <div class="y-scroll" style="border:solid 1px;"> 
     <span>Large amount of stuff ...</span> 
    </div> 
    </div> 
    <div class="half-col" style="background: blue;"> </div> 
</body>

Ich verwende die folgenden CSS-Stile:

div.half-col { 
    height: 50vh; 
} 

div.y-scroll { 
    overflow: auto; 
    height: inherit; 
}

height: inherit ist die zweite Unter div Begrenzung (der mit der „großen Menge an Material“) zur Gesamthöhe der hellgrün Eltern div. Was (im Spiel) noch dazu führt, dass es scrollt, da selbst das nicht genug Platz ist. Aber was ich wirklich will, ist, die Höhe dieses div auf die Höhe des Elterndivs zu begrenzen minus dem, was bereits von den divs darüber verbraucht wurde. (In meinem tatsächlichen Anwendungsfall gibt es mehr als ein div darüber, von denen jedes nur eine kleine Menge an vertikalem Raum benötigt, der das Elternteil niemals überläuft.) Was ist der richtige Weg, um die Höhe eines div auf den Raum zu begrenzen "Überbleibsel" im Elternteil?

JSFiddle: https://jsfiddle.net/pj056n0n/3/

(dies ist mein erstes Mal JSFiddle mit - sorry, wenn ich es falsch gemacht hat)

Quelle

2016-06-24 PurpleVermont

dies mit CSS nur lösen Sie die Höhe des kleinen div wissen müssen . Wenn Sie nicht über die Höhe des kleinen div kennen, können Sie es mit jquery tun:

$(document).ready(function() { 
    small_div(); 
}); 
$(window).resize(function() { 
    small_div(); 
}); 
function small_div() { 
    $('.y-scroll').css({ 
    'height': ($('#first_half_col_id').height() - $('#small_div_id').outerHeight()) + 'px' 
    }); 
}

Hier können Sie den Lauf sehen: jsFiddle

Quelle

2016-06-24 23:17:30

Ouch. Ich dachte, ich könnte so etwas machen, aber ich bin wirklich überrascht, dass ich es tun muss. Es scheint eine natürliche genug Sache zu sein, zu tun zu wollen. – PurpleVermont

Das Problem ist die Höhe des kleinen div. Wenn Sie diesen Wert festlegen, können Sie die CALC-Eigenschaft von CSS verwenden. Sie können mehr [hier] lesen (http://www.w3schools.com/cssref/func_calc.asp). Grüße aus Mexiko –

Danke. Gibt es keine Möglichkeit zu sagen, "fill what's left" statt eine explizite Höhe zu setzen? – PurpleVermont

Beschränken Sie die Höhe des Kindes auf das, was im Elternteil übrig ist

Antwort

Verwandte Themen