Динамически корректируйте высоту содержимого по высоте окна с помощью flexbox - PullRequest
Новая
       44

Динамически корректируйте высоту содержимого по высоте окна с помощью flexbox

1 голос
/ 29 мая 2019

Я просто хочу ограничить высоту «view» div высотой окна и показать полосу прокрутки рядом с текстом, который выходит за пределы высоты окна. У меня это работало, но по какой-то причине я снова запутался и не вижу почему .. 

<html>
<head><style>
    #view {height:100%}
    #wrap {display:flex;border:solid;margin-top:0;margin-bottom:0;padding:20px}
    #plan {flex: 1 1 auto;width:20%;display:flex;flex-direction:column;}
    #plan-head{}
    #plan-info{}
    #plan-list{flex 1 1 auto;overflow:auto;padding:10;background-color:#F7F7F7}
    #map {flex: 1 4 auto;overflow:hidden;border:0;width:70%;overflow-x:none; }
    #cal {flex: 1 2 auto;width:40%}
</style></head>
<body>
<div id="view">

<div id="wrap">

<div id="plan">

<div id="plan-head"style="padding:10px;background-color:#F7F7F7">Content 1</div>
<div id="plan-info">info</div>
<div id="plan-list">content that should scroll:
o Plan sfd sqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsf sqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsf sqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsf sqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsf sqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsf sqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsf sqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsfsqf sdqf sfd sfqd s ds sdf sd sd sdsdf fqf sfqsf sf qsfqs fqs fqsf qsf fqs fqsf qsfq sdfs fs fqs d ff sfq sf sfqs fqsf sdf qsf sd qsf qsf qsf df qs fsq df f sfqsf sfs fqsf f
</div>

</div>

<div id="map">content 2</div>

<div id="cal">content 3</div>

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

Итак, я хотел бы видеть три столбца, все с максимальной высотой окна и первый с 3 строками, из которых первые две строки ограничены их содержанием, а нижний ряд занимает оставшуюся высоту экрана с полосой прокрутки внутри ( значение внутри плана списка дел) Чувствую себя немного глупо в данный момент, потому что это, вероятно, довольно просто;)

...