Как развернуть компонент в нижней части страницы и сделать его в конечном итоге прокручиваемым?
Я хотел бы увеличить высоту компонента, пока не будет достигнута нижняя часть страницы. В конце концов, внутри него должна появиться полоса прокрутки, в зависимости от содержимого, но страница не должна прокручиваться, прокручиваться должен только сам компонент.
Решение, которое я нашел до сих пор, заключается в следующем:
<div style = "height: 83vh; overflow-y: auto;">
<div class = "container-fluid pt-3">
<div class = "card-columns">
<div class = "card" style = "max-width:250px;" *ngFor = "let myImg of imgList">
<img class = "card-img-top" style = "width:100%;" [src] = "myImg">
</div>
</div>
</div>
</div>
Это не идеальное решение, потому что это height: 83vh; может зависеть от браузера и хорошо работать только в моем случае. Затем я попытался сделать следующее:
<div style = "height: 100%; overflow-y: auto;">
но div будет переполнять веб-страницу, активируя прокрутку страницы, а не прокрутку компонента.
Любое предложение для достижения поведения, которое я хочу?
Ответы 3
Свойство стиля, которое вы ищете, это max-height. Вы можете установить это в своем div, и это не позволит ему когда-либо увеличиваться.
Одна хитрость для просмотра этого max-height в случае, если у вас в настоящее время недостаточно контента, чтобы заполнить его по максимуму, — установить height равным max-height (временно), а также временно поставить себе border на div. Это позволит вам визуализировать, насколько большим может стать этот div.
Обновлено: другой подход... (с примером скрипки):
html, body {
height: 100%;
overflow: hidden;
}
Затем сделайте высоту вашего основного div в процентах, 100% сделает ее абсолютно нижней, вам может не понравиться внешний вид, поэтому попробуйте 95%, добавьте overflow: auto;, чтобы получить полосу прокрутки всякий раз, когда высота больше, чем контейнер. в.
Вы хотите, чтобы max-height был динамичным, разным для каждого человека в зависимости от его разрешения/высоты монитора? Или вы говорите, что дочерний div переполняет max-height родительского div даже с набором max-height?
Да, я хочу, чтобы максимальная высота была динамической, в зависимости от экрана. Он должен достигать нижней части страницы (чтобы страница не прокручивалась) и отображать (или не отображать) внутреннюю полосу прокрутки в компоненте, если это необходимо.
Вместо этого попробуйте следующее, дайте мне знать, как это работает. html, body { height: 100%; }
Это не так. Если это может помочь, я нахожусь внутри компонента Angular, который должен расширяться вниз и показывать прокрутку внутри него, в зависимости от его содержимого.
Хорошо, новый подход. Я попробовал кое-что для себя на небольшом тестовом сайте, и это сработало для меня (знаменитые последние слова) ... Я редактирую свой ответ, пожалуйста, дайте мне знать, как это работает для вас.
@Rexam Я добавил скрипку для того, о чем я говорю, посмотри и дай мне знать, работает ли она для того, что тебе нужно.
Может быть, вы можете поиграть с функцией calc() в CSS; вы можете принять во внимание полный viewport height и вычесть количество в пикселях, равное другим компонентам на экране, чтобы компонент, которым вы хотите заполнить экран, использовал только это оставшееся пространство.
Если вы протестируете фрагмент; компонент использует достаточно места в зависимости от содержимого внутри, но если содержимое становится достаточно большим, чтобы сдвинуть компонент вниз, вместо того, чтобы вызывать прокрутку всей страницы, он остается на месте и прокручивает только содержимое внутри.
/* These styles are just for consistency */
body {
margin: 0;
}
body * {
box-sizing: border-box;
}
/*****************************************/
.top-bar {
height: 60px;
background-color: black;
}
section .component {
max-height: calc(100vh - 60px);
max-width: 900px;
margin: 0 auto;
border: 1px solid red;
overflow-y: auto;
}<div class = "top-bar">
</div>
<section>
<div class = "component">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</section>Это, наверное, самый простой способ добиться того, чего я хочу. Я поигрался с функцией calc() и нашел параметры, которые мне нужны, чтобы получить то, что я хотел.
В одном из своих комментариев вы упомянули, что используете Angular — вам следует обновить вопрос, чтобы включить это, и добавить его в качестве тега.
Вы можете использовать window.innerHeight, чтобы получить высоту пикселя текущего представления.
Если в вашем приложении Angular есть одноэлементная служба, в которой вы поддерживаете состояние, вы можете использовать Behavior Subject для хранения этого значения, чтобы вы могли наблюдать его в своих компонентах:
ie: state.service.ts
import { Observable, Subject, BehaviorSubject } from 'rxjs';
// Observable number sources
private currentWindowHeightStore = new BehaviorSubject<number>(0);
// Observable number streams
public currentWindowHeight$ = this.currentWindowHeightStore.asObservable();
// Service message commands
public setCurrentWindowHeight(WindowHeight: number) {
this.currentWindowHeightStore.next(WindowHeight);
}
Затем в вашем компоненте определите переменные для хранения размера окна, и если вы используете содержимое страницы (список элементов), переменную для хранения размера страницы:
private windowSize: number;
private pageSize: number;
В ngOnInit в вашем компоненте подпишитесь на Observable state.service и установите размер окна и размер страницы на основе общего размера окна, за вычетом места, необходимого для навигации и т. д. (здесь я использовал примерные значения, вы захотите установить их по вашим макетам)
this.stateSvc.currentWindowHeight$
.subscribe(
(windowSize => {
this.windowSize = windowSize;
this.pageSize = Math.round((this.windowSize - 200) / 30) - 2;
this.cvPaging.pageSize = this.pageSize;
this.flex.refresh(true);
// 200 is the total size of the navigation header if you have one
// 30 is the size of a single row in the grid
// Total window size - minus total navigation / divided by the row height gives us the number of rows
// that will fit on the current screen size and we set the paging parameter to that value - 2 rows
}))
Теперь у вас есть переменная windowSize, которая будет обновляться при изменении размера окна браузера, и переменная pageSize, которую вы можете использовать, если пролистываете длинные списки, чтобы узнать, сколько элементов поместится в окне при его текущем размере.
Вы можете использовать переменную windowSize, чтобы установить высоту вашего контейнера div с помощью ngStyle:
<div [ngStyle] = "{'height': 'auto','max-height':windowSize}>
Your content here.
</div>
Это имеет смысл, но как мне узнать, какое значение я должен поместить в свойство max-height? Потому что в настоящее время моя проблема заключается не в том, что у меня недостаточно контента, а в том, что у него слишком много контента, так что компонент переполняет страницу. Я думаю, что я хочу, чтобы максимальная высота моего компонента была равна оставшемуся пространству на странице. Есть ли способ сделать это?