높이를 지정하지 않고 세로 스크롤이 가능한 플렉스 컨테이너를 만드는 방법은 무엇입니까?

아래 코드 조각에서는 첫 번째와 두 번째 컨테이너가 각각 창 높이의 50%를 차지할 것으로 예상하고 첫 번째 컨테이너 본체에 수직 오버플로가 발생하길 원합니다. 불행하게도 거대한 블록을 컨테이너에 넣을 때 - 페이지의 50%보다 커지며 자동 오버플로가 작동하지 않습니다. 높이를 지정하지 않는 방법이 있나요? *{margin:0;box-sizing:border-box;}.root{height:100vh;display:flex;flex-direction:column

P粉286046715 2023-09-11 13:07:33 0  1  532

flex를 수평으로 감싸기 위해 그리드의 열을 사용하는 방법은 무엇입니까?

https://codepen.io/itaied246/pen/eYbOWjm 가로로 공간을 채우고 아래로 스크롤하는 세로 스크롤 기능을 갖춘 flexbox를 성공적으로 만들었습니다. 가로로도 동일한 작업을 수행하고 싶습니다. 즉, 공간을 세로로 채우고 오른쪽으로 스크롤합니다. 내 flexdiv는 max-content가 있는 해당 그리드 안에 있습니다. 내가 놓친 게 무엇입니까?

P粉481035232 2023-08-16 21:11:09 0  1  548

가로 스크롤바에만 CSS를 적용하는 방법

저는 신입 인턴인데 간단한 작업을 주었습니다. 가로 스크롤 막대를 개인화하세요. 이 코드가 있는데 세로 스크롤 막대가 사라집니다. 세로 방향을 기본값으로 설정해야 합니다... 가로 스크롤만 기사를 개인화해야 합니다. ::-webkit-scrollbar{width:7px;}::-webkit-scrollbar-thumb:horizontal{border-radius:8px; background-color:rgba(92,92,92,0.5);}예:

P粉276876663 2024-04-01 16:25:15 0  2  400

제목 변경: 수직형 제품 디스플레이

내 웹페이지에는 현재 프로젝트 제품이 세로로 한 줄씩 나열되어 있습니다. 스크롤 가능한 방식으로 세로로 표시하고 싶습니다. 가로로 어떻게 바꾸나요? divclass="row"><divclass="col-12"><divclass="tab-contenttab-animate-zoom"><!--StartSingleTabItem-->&

P粉926174288 2024-04-05 09:17:50 0  1  3652

높이 100vh는 수직 스크롤바를 제공합니다

높이 100vh에 문제가 있으며 세로 스크롤 막대가 제공됩니다. 높이가 100vh인 widget-holderdiv 안에 외부 콘텐츠를 삽입합니다. 그러나 위젯 홀더의 콘텐츠는 상위 div를 초과하고 수직 스크롤바를 제공합니다. 고정 헤더를 제거하면 세로 스크롤 막대가 표시되지 않습니다. 하지만 이건 삭제할 수 없어요. widget-holderdiv의 높이를 줄이면 일부 내용이 표시되지 않습니다. 그래서 높이를 낮출 수가 없어요. 위젯 홀더 콘텐츠가 상위 높이와 정확히 일치하도록 하는 솔루션이 필요합니다. HTML

P粉378264633 2024-03-27 23:06:05 0  1  522

입력과 선택이 같은 줄에서 서로 다른 수직 위치를 가짐

나는 이 웹사이트에 플로팅 태그를 사용합니다. 입력과 선택을 한 줄에 넣도록 코드를 약간 수정했습니다. Edge 버전 114.0.1823.67 및 Chrome 버전 114.0.5735.199에서는 기준선의 세로 위치가 다릅니다. Firefox 버전 115.0에서는 기준선의 수직 위치가 동일합니다. 코드: @importurl('https://fonts.google.com/specimen/Lato?selection.family=Lato');:ro

P粉237125700 2023-09-09 15:45:02 0  1  472

javascript - 오버플로 스크롤의 초기 위치를 설정하는 방법은 무엇입니까?

div를 세로로 가운데에 배치하려면 top: 50%;translateY(-50%)를 사용하세요. div의 높이가 상위 컨테이너보다 크면 초기 스크롤 위치는 이와 비슷하게 div의 상단이 아닙니다. 조언 좀 해주세요. .

phpcn_u1582 2017-05-19 10:16:30 0  2  798

화면의 CSS 센터 팝업은 컴퓨터와 태블릿에서는 작동하지만 휴대폰에서는 작동하지 않습니다.

CSS를 사용하여 화면 중앙에 도움말 팝업을 표시해 보세요. 내 컴퓨터와 ipad에서는 잘 작동하지만 iPhone에서는 팝업이 스크롤 가능한 전체 수직 공간 내에서 수직 중앙에 위치하므로 팝업을 보려면 가끔 위나 아래로 스크롤해야 합니다. 호출할 때 현재 보이는 화면의 중앙에 위치하도록 하고 싶습니다. (페이지 높이는 정적이지 않습니다. 즉, 사용자 활동에 따라 늘어나고 줄어듭니다.) 관련 CSS는 다음과 같습니다. .helpcontent{position:fixed;top:50%;left:50%;trans

P粉662802882 2024-03-28 20:02:46 0  1  394

html5 - 상단 및 하단 중앙 정렬은 실제로 불가능합니다. 그렇죠?

수직정렬에는 상단, 중간, 기준선, 하단이 있습니다. 아래 줄 높이 모델의 네 줄을 살펴보세요. 기하학적 관점에서 볼 때, 이 선높이 모델의 기하학적 중심선은 중심선과 기준선 사이에 있으며, 중심선은 위쪽으로 기울어져 있고 기준선은 아래쪽으로 기울어져 있습니다. 정점...

迷茫 2017-06-20 10:06:16 0  1  936

javascript - div 캐러셀 문제

3개의 버튼은 순서대로 배열된 3개의 수직 div에 해당합니다. 두 번째 div의 버튼을 클릭하면 두 번째 div가 첫 번째 div의 위치로 슬라이드되고 세 번째 div가 두 번째 div의 위치로 슬라이드됩니다. 첫 번째 div가 아래쪽으로 슬라이드됩니다. 세 개의 div가 모두 동시에 표시됩니다. 개인적으로 이건 캐러셀 문제라고 생각합니다만...

黄舟 2017-05-19 10:28:51 0  2  602

오버플로 컨테이너의 플렉스 항목 위로 스크롤할 수 없습니다.라는 제목이 다음과 같이 다시 작성됩니다. 오버플로 컨테이너의 플렉스 항목 위로 스크롤할 수 없습니다.

Flexbox를 사용하여 유용한 모달을 만들려고 시도하는 동안 브라우저 문제로 보이는 것을 발견하고 알려진 수정 사항이나 해결 방법이 있는지 또는 수정 방법에 대한 아이디어가 있는지 궁금했습니다. 내가 해결하려는 문제에는 두 가지 측면이 있습니다. 첫째, 모달 창을 수직으로 중앙에 배치하면 예상대로 작동합니다. 두 번째는 외부 스크롤을 사용하여 모달 창을 스크롤하도록 만드는 것입니다. 그러면 내부 콘텐츠가 아닌 전체 모달 창이 스크롤됩니다. 이 방법을 사용하면 모달 범위를 넘어 확장할 수 있는 드롭다운 메뉴 및 기타 UI 요소를 가...

P粉854119263 2023-08-22 14:58:06 0  2  510

전체 페이지를 이동하지 않고 특정 섹션을 대상으로 하는 페이지 내에서 세로 스크롤 구현

일부 페이지에서 이런 효과를 본 적이 있습니다. 아래로 스크롤했지만 페이지 자체가 움직이지 않는 것 같습니다. 따라서 일부 요소는 페이드 인 또는 아웃되거나 나타나거나 사라집니다. 5장의 카드가 포함된 섹션이 있습니다. 이제 동일한 효과를 만들고 싶습니다. 섹션까지 아래로 스크롤할 때 위아래로 스크롤하여 섹션을 탐색하고 싶습니다. 현재 위치에 따라 카드를 표시하거나 숨기고 싶습니다. 먼저 해당 섹션에 Overflow:scroll을 추가했지만 이 효과를 만들 아이디어가 부족했습니다.

P粉946437474 2023-08-15 19:29:46 0  1  433

Vuejs/Nuxtjs: v-for를 사용하지 않고 동적 V 모델 이름을 만드는 방법은 무엇입니까?

Vuejs/Nuxtjs 애플리케이션에서 까다로운 문제에 직면했습니다. 애플리케이션에서는 여러 노드를 동적으로 생성합니다. 이 노드에는 v-model을 할당한 라디오 버튼이 있습니다. 그러나 하나의 Vuejsv 모델 값을 변경하면 다른 모든 Node 값에 영향을 미칩니다. 모든 노드가 동일한 V 모델을 사용하기 때문에 이 문제가 발생한다는 것을 알고 있습니다. 내 라디오 버튼에 다른 V 모델을 할당하고 싶지만 v-for를 사용하지 않고 이 작업을 수행하고 싶습니다. 나는 이미 C에 있어요

P粉920199761 2023-12-30 22:52:51 0  1  550

외부 div 스크롤을 비활성화하고 내부 div가 맨 아래에 도달하면 다시 활성화합니다.

세로로 배치된 여러 개의 div가 있는 웹페이지를 만들고 있습니다. 내 개념은 다음과 같습니다. 스크롤 막대가 첫 번째 div의 아래쪽에 도달하면 외부 스크롤 막대가 비활성화되고 두 번째 스크롤 막대가 활성화되면 사용자는 내부 스크롤 막대 하단에 도달해야 외부 스크롤 막대를 활성화할 수 있습니다. 스크롤바 인터넷에서 이름과 예를 찾으려고 노력했지만 실제로 원하는 것을 찾을 수 없습니다. 그래서 나는 내가 생각하는 것을 알아내는 데 도움을 줄 자원봉사자를 요청하고 싶습니다.

P粉211273535 2024-03-30 12:33:42 0  1  523

수직 높이가 증가하면 div를 아래로 확장하지 않고 위로 확장하려면 어떻게 해야 합니까?

제목과 내용이 있는 페이지가 있습니다. 헤더는 동적 값이며 내용에 따라 다양한 내용을 가질 수 있습니다. 이 문제는 제목이 길고 두 줄 이상 필요할 때 발생합니다. 나는 콘텐츠가 동일한 수직 및 수평 위치에 있기를 원하기 때문에 긴 제목의 마지막 행이 제목이 더 짧은 경우 첫 번째 행과 동일한 수직 위치에 있기를 원합니다. 나는 다른 사람들이 나 자신을 이해할 수 있기를 바랍니다. 두 번째 단어를 추가하여 제목을 편집해 보면 무슨 뜻인지 알 수 있을 것입니다. 이 문제는 flex-box로 해결할 수 있을 것 같은데 어떻게 해결해야 ...

P粉530519234 2024-03-22 10:39:08 0  1  351

CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까?

한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽으로 정렬하기 때문에 가로로 쌓이지만 세로로 쌓기를 원합니다. 내 현재 코드: .topicheader{padding:2%2%;float:leftdisplay:block;Background-image:linear-gradient(totop,rgb(40,40,40),rgb(50,50,50))

P粉982054449 2024-04-06 20:45:26 0  2  806

CSS 축소 여백: 그 목적은 무엇입니까?

CSS2 상자 모델은 인접한 수직 여백이 축소될 것임을 알려줍니다. 나는 이것이 많은 설계 오류의 원인이기 때문에 짜증스럽다고 생각합니다. 여백 축소의 목적을 이해함으로써 이를 언제 사용해야 하는지, 필요하지 않을 때 어떻게 피하는지 이해할 수 있기를 바랍니다. 이 기능의 목적은 무엇입니까?

P粉318928159 2023-10-25 19:38:51 0  1  709