Tworzenie div pionowo przewijania za pomocą CSS
To
<div id="" style="overflow:scroll; height:400px;">Daje div, że użytkownik może przewijać zarówno w poziomie, jak i w pionie. Jak to zmienić, aby div był tylko przewijalny w pionie?
7 answers
Masz to pokryte oprócz korzystania z niewłaściwej nieruchomości. Pasek przewijania może zostać uruchomiony za pomocą dowolnej właściwości overflow, overflow-x, lub overflow-y i każdy może być ustawiony na dowolny z visible, hidden, scroll, auto, lub inherit. Aktualnie oglądasz te dwa:
auto- Ta wartość będzie wyglądać na szerokość i Wysokość pudełka. Jeśli są zdefiniowane, nie pozwoli to rozszerzyć pola poza te granice. Zamiast tego (jeśli zawartość przekracza te granice), utworzy pasek przewijania dla granicy (lub obu), która przekracza jej długość.scroll- Ta wartość wymusza pasek przewijania, bez względu na wszystko, nawet jeśli zawartość nie przekracza ustawionej granicy. Jeśli zawartość nie wymaga przewijania, Pasek pojawi się jako "Wyłączony" lub nieinteraktywny.
Jeśli zawsze chcesz, aby pojawił się pionowy pasek przewijania:
Powinieneś użyć overflow-y: scroll. To wymusza wyświetlenie paska przewijania dla osi pionowej czy jest to potrzebne, czy nie. Jeśli nie możesz przewijać kontekstu, pojawi się on jako"Wyłączony" pasek przewijania.
Jeśli chcesz, aby pasek przewijania był wyświetlany tylko wtedy, gdy możesz przewijać pole:
Po prostu użyj overflow: auto. Ponieważ zawartość domyślnie przechodzi do następnej linii, gdy nie mieści się w bieżącej linii, nie zostanie utworzony poziomy pasek przewijania (chyba że znajduje się na elemencie, który ma wyłączone zawijanie słów). Dla pionowego paska, pozwoli zawartość rozwinąć się do wysokość, którą podałeś. Jeśli przekroczy tę wysokość, wyświetli pionowy pasek przewijania, aby wyświetlić resztę zawartości, ale nie wyświetli paska przewijania, jeśli nie przekracza wysokości.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-18 19:29:58
Spróbuj tak.
<div style="overflow-y: scroll; height:400px;">Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-20 17:49:11
Dla 100% wysokości widoku użyj:
overflow: auto;
max-height: 100vh;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-21 12:43:37
Użyj overflow-y: auto; Na div.
Należy również ustawić szerokość.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-14 17:59:37
Możesz użyć tego kodu.
<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
overflow-x : właściwość overflow-x określa, co zrobić z lewą / prawą krawędzią zawartości-jeśli przepełni ona obszar zawartości elementu.
overflow-y : właściwość overflow-y określa, co zrobić z górną/dolną krawędzią zawartości - jeśli przepełni ona obszar zawartości elementu.
Wartości
visible : Wartość domyślna. Zawartość nie jest przycięta i może być renderowana poza pudełko z treścią.
hidden : zawartość jest przycięta - i nie ma mechanizmu przewijania.
scroll : zawartość jest przycięta i zapewniony jest mechanizm przewijania.
auto : powinno spowodować, że mechanizm przewijania zostanie zapewniony dla przepełnionych pudełek.
initial: ustawia tę właściwość na jej wartość domyślną.
inherit dziedziczy tę właściwość od elementu nadrzędnego.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-15 12:55:26
Możesz użyć overflow-y: scroll do przewijania w pionie.
<div style="overflow-y:scroll; height:400px; background:gray">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-24 10:28:44
Problem z tymi wszystkimi odpowiedziami był taki, że nie reagowały. Musiałem mieć stałą wysokość dla rodzica, którego nie chciałem. Nie chciałem też spędzać mnóstwa czasu na grzebaniu w zapytaniach o media. Jeśli używasz angular, możesz użyć bootstraps tabset i wykona on całą ciężką pracę za Ciebie. Będziesz mógł przewijać wewnętrzną zawartość i będzie ona responsywna. Kiedy skonfigurujesz kartę, zrób to tak: $scope.tab = { title: '', url: '', theclass: '', ative: true };... chodzi o to, że nie chcesz tytułu ani obrazu icon. następnie ukryj obrys karty w cs Tak:
.nav-tabs {
border-bottom:none;
}
A także to .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}
i na koniec, aby usunąć niewidoczną kartę, którą nadal możesz kliknąć, jeśli nie zaimplementujesz tego: .nav > li > a {padding:0px;margin:0px;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-10 21:26:46