начальной загрузки, сетка и прокрутка

Я использую самозагрузки, угловые и угловой-UI-маршрутизаторначальной загрузки, сетка и прокрутка

, что я хочу, чтобы достичь это макет:

где меню на слева панель навигации, панель инструментов сверху, некоторые панировочные сухари, содержимое и нижний колонтитул.

I может получить все эти элементы на своем месте. Однако мне нужно заполнить содержимое переменным количеством элементов из источника данных покоя. Я хочу, чтобы обернуть эти красиво, поэтому я использую следующий угловой/html

<div class="col-lg-12 "> 
 
    <div class="row"> 
 
    <div class="col-md-4 " ng-repeat-start="item in $ctrl.items"> 
 
     <div> card details here </div> 
 
     <div class="clearfix" ng-if="$index % 3 === 2"></div> 
 
     <div ng-repeat-end=""></div> 
 
    </div> 
 
    </div> 
 
</div>

это работает, и показывает все данные. Тем не менее, так как есть больше данных, чем может поместиться в DIV, полосы прокрутки появляются на окне

То, что я хотел бы для того чтобы достигнуть, чтобы получить скроллбар появляться в DIV контента, как на скриншоте

Я пробовал все виды css, как overflow: scroll-y, но не могу понять это.

источник

2016-11-05 jmls

Я думаю, что рабочая скрипка была бы лучшей, чтобы помочь здесь. В любом случае, похоже, что вы используете Bootstrap неправильно. Вы можете заменить 'col-lg-12' на' container'. Я не верю, что это исправит вашу проблему, но, по крайней мере, это единственное исправление, которое я могу рассказать вам прямо сейчас, в соответствии с вашим кодом и моим умом. :-) – Aer0

спасибо за ответ - да, пытаясь распутать все корпоративные вещи, заставляет страдать от боли, но я над этим работаю;) Изменение «контейнера» (или контейнерной жидкости) не помогло хотя :( – jmls

С уважением, без какого-либо правильного кода. Полосы прокрутки, которые вы пишете. Появляются они вертикально или горизонтально? – Aer0

Ваша проблема, похоже, связана с динамическим heights. Используя фиксированный heights (также можно использовать%, vh, ...), вы можете заставить этот макет работать правильно. Для этого есть много решений.

1. Использование%

Если вы собираетесь использовать%, и это будет, безусловно, будет лучшим вариантом, вы должны начать с корневого тега, который в основном является <html>. После этого вы должны добавить правильное значение высоты в его дочерние элементы, которые хотите использовать. Имейте в виду, что вы начинаете с 100% и сжимаете дочерний элемент до требуемой высоты.

2. Использование Vh

Значение Vh является своего рода такой же, как%. Вам просто не нужно устанавливать высоту для каждого родительского элемента. Demo

Примечание. Возможно, у вас должно быть check, если это работает с вашим целевым браузером.

3. CSS3 известково функция

Propably новейший метод(). Вы можете рассчитать значения через CSS (3), используя, например, calc(100% - 100px). Это довольно круто, но и не поддерживается каждым браузером.См. here.

4. Фиксированный макет

Вы также можете использовать некоторые фиксированные позиционирований. Настройка нижнего колонтитула, заголовка и навигатора до position: fixed; также будет поддерживать все плавное и чистое. Я бы использовал фиксированный макет, чтобы сделать это, так как мне он больше всего понравится. Также он не имеет никакой несовместимости с устаревшими браузерами.

источник

2016-11-05 22:36:21 Aer0

выясняет, что родительский элемент не имел правильной информации о высоте, поэтому # 1 был очень полезен! Благодарю. – jmls

вместо overflow: scroll-y,

пожалуйста, попробуйте:

height:100%; 
overflow-y:scroll

* придав ему высоту позволяет полосу прокрутки появляться.

источник

2016-11-05 21:09:28

извините, это была опечатка с моей стороны. спасибо за помощь, хотя – jmls

начальной загрузки, сетка и прокрутка

ответ

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