CSS, Js 관련 문의 건

Question

제가 웹페이지를 개발 했는데요.크롬 브라우저 배율(100%,70%..) 에 따라 div 이 가려지는 이슈가 발생했습니다.(* 스크롤이 생성되면서 가려짐)다행히 css>style 에 width를 100%로 부여해서 가로는 해결 했는데.height가 해결이 안되네요.아래와 같이 사용자가 무슨 배율 이든 DIV3개가 전부 동일한 크기로 노출이 되야 하는데요.혹시 별도로 스크립트를 구성해서.전체 높이를 3등분 해서 각각 DIV의 HEIGHT에 할당 해서 해결해야하는건가요?원하는건 세로에 스크롤이 생성 안되게 하는 것 입니다.

kenu,전독시 · Answer

1. viewport 단위 사용높이를 viewport 단위(vh, vw)로 설정하여 브라우저 창의 크기에 따라 자동으로 조정할 수 있습니다. 예를 들어, 화면의 50% 높이를 유지하려면 다음과 같이 설정할 수 있습니다:.div-class { height: 50vh; /* 화면의 50% 높이 */ } 2. CSS Grid 또는 Flexbox 사용CSS Grid나 Flexbox를 사용하여 컨테이너 내의 항목들이 적절하게 배치되도록 할 수 있습니다. 이는 특히 레이아웃이 복잡한 경우 유용합니다.CSS Grid 예제:.container { display: grid; grid-template-columns: 1fr; /* 한 열로 구성 */ grid-template-rows: auto 1fr; /* 첫 번째 행은 콘텐츠에 맞춰 높이 조정, 두 번째 행은 남은 공간을 차지 */ } .div-class { grid-row: 2; /* 두 번째 행에 위치 */ } Flexbox 예제:.container { display: flex; flex-direction: column; /* 세로 방향으로 아이템 배치 */ } .div-class { flex-grow: 1; /* 가능한 만큼 확장 */ } 3. JavaScript 사용JavaScript를 사용하여 동적으로 높이를 조정할 수도 있습니다. 이를 통해 브라우저 창의 크기가 변경될 때마다 높이를 재계산할 수 있습니다.window.addEventListener('resize', function() { var windowHeight = window.innerHeight; document.querySelector('.div-class').style.height = windowHeight + 'px'; }); 이 방법들은 높이 문제를 해결하는 데 도움이 될 수 있습니다. 상황에 맞게 선택하여 적용해보세요.from: https://www.phind.com/search?cache=sasw3zvve9lqauzr9bdw1c5k

CSS, Js 관련 문의 건

1개의 답변

기술 목록