Высота ребенка ограничена оставшимся пространством родителя

Как использовать CSS3 для установки класса прокрутки для настройки его высоты на все оставшееся пространство его родителя. Прокрутка не должна изменять высоту родителя, даже если содержание прокрутки очень велико. В такой ситуации прокрутка должна показывать полосы прокрутки. Является ли это возможным?Высота ребенка ограничена оставшимся пространством родителя

div { 
 
    margin: 0; 
 
    border-radius: 12px; 
 
    padding: 6px; 
 
    background-color: white; 
 
} 
 
body { 
 
    margin: 0px; 
 
    width: auto; 
 
    height: 100vh; 
 
    display: grid; 
 
    grid: 20vw 1fr/20vh 1fr; 
 
    grid-template-areas: "top-left main""bottom-left main"; 
 
    grid-row-gap: 4px; 
 
    grid-column-gap: 4px; 
 
} 
 
.top-left { 
 
    grid-area: top-left; 
 
    background-color: lightblue; 
 
} 
 
.bottom-left { 
 
    grid-area: bottom-left; 
 
    background-color: lightgreen; 
 
} 
 
.main { 
 
    grid-area: main; 
 
    background-color: lightpink; 
 
} 
 
.scrollbox { 
 
    background-color: white; 
 
}

<body> 
 
    <div class="top-left"> 
 
    Top-Left 
 
    </div> 
 
    <div class="bottom-left"> 
 
    Bottom-Left 
 
    <div class="scrollbox"> 
 
     <svg viewBox="0 0 2000 2000"> 
 
     <circle cx="1000" cy="1000" r="1000" /> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
    <div class="main"> 
 
    Main 
 
    <div class="scrollbox"> 
 
     <svg viewBox="0 0 2000 2000"> 
 
     <circle cx="1000" cy="1000" r="1000" /> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-03-09 Piotr Antoniak

Если на «регулировать его высоту до всего остального пространства своего родителя» вы имеете в виде высоту тела от 100vh, то scrollbox классов и не реальная проблема. Вы можете захотеть ограничить всех прямых детей тела определенной высотой, которая при суммировании меньше высоты тела.

I.e. если тело имеет 3 детей, каждая детская высота будет 100/3 единиц, так что вам нужно только что-то вроде этого:

body>*{ 
    max-height: 33.33333333vh; 
    overflow-y: auto; 
}

Свойство переполнения добавляет вертикальные полосы прокрутки вы хотели. Для того, чтобы убедиться, что только scrollbox классы должны иметь определенные высоты и эти полосы прокрутки, то вы можете ссылаться на них подобным образом:

body>*>.scrollbox { 
    max-height: 30vh; 
    overflow-y: auto; 
}

Однако, интересно, почему вы даете тело, что высота? vh является particular unit и 100vh в теге тела такое же, как писать 100%:

С/ВХ Vw, мы можем элементы размера, чтобы быть по отношению к размеру окна просмотра. Интересно, что в единицах vw/vh 1 единица отражает 1/100-ю ширину окна просмотра. Например, чтобы сделать элемент полной шириной окна просмотра, вы должны установить его ширину: 100vw.

Вот ваш сниппет, хотя:

div {margin: 0;border-radius: 12px;padding: 6px;background-color: white;} 
 
body {margin: 0px;width: auto;height: 100vh;display: grid;grid: 20vw 1fr/20vh 1fr;grid-template-areas: "top-left main""bottom-left main";grid-row-gap: 4px;grid-column-gap: 4px;} 
 
.top-left {grid-area: top-left;background-color: lightblue;} 
 
.bottom-left {grid-area: bottom-left;background-color: lightgreen;} 
 
.main {grid-area: main;background-color: lightpink;} 
 
.scrollbox { 
 
    background-color: white; 
 
} 
 
body>*>.scrollbox { 
 
    max-height: 30vh; 
 
    overflow-y: auto; 
 
}

<body> 
 
    <div class="top-left"> 
 
    Top-Left 
 
    </div> 
 
    <div class="bottom-left"> 
 
    Bottom-Left 
 
    <div class="scrollbox"> 
 
     <svg viewBox="0 0 2000 2000"> 
 
     <circle cx="1000" cy="1000" r="1000" /> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
    <div class="main"> 
 
    Main 
 
    <div class="scrollbox"> 
 
     <svg viewBox="0 0 2000 2000"> 
 
     <circle cx="1000" cy="1000" r="1000" /> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-03-09 13:12:45 Armfoot

Я новичок, так что я не знаю, правильной терминологии, единиц и т.д. Извините за это. –

Чего я хочу достичь? Я просто хочу, чтобы оба белых divs (scrollboxes) были последовательно выровнены по всему свободному пространству зеленых (Bottom-Left) и розовых (Main) divs. –

@PiotrAntoniak Я также не очень хорошо знаком с 'vh', это полезная единица для разных видовых экранов (отзывчивый дизайн). 'max-height' позволяет вам ограничить высоту внутреннего содержимого определенным пространством, но если вы действительно хотите, чтобы они оставались в одном и том же месте, даже если они меньше максимальной высоты, вы можете использовать' height'. – Armfoot

Высота ребенка ограничена оставшимся пространством родителя

ответ

Смежные вопросы