웹 페이지에는 두 개의 열이 있고 두 개의 열은 각각 사용하는 일반적인 열 대신 자체 스크롤 막대가 있습니다. 예를 들어, 생각하고있는 것은 새 트위터 UI의 행입니다. 목록이 높이보다 길고 다른 열이 자체 스크롤바로 세부 정보를 표시하면 스크롤 막대가있는 목록이 한 열에 표시됩니다.웹 페이지에 두 개의 독립적 인 열을 만드는 방법은 무엇입니까?
나는 앞으로 나아갈 길을 잃어 버렸습니다.이를 위해 프레임을 사용해야합니까? 전역 스크롤바를 억제 할 수 있고 각 열은 CSS로 자체 스크롤바를 사용할 수 있습니까?
HTML :
<html>
<body>
<div class='right'>
<!-- data -->
</div>
<div class='left'>
<!-- data -->
</div>
</body>
</html>
CSS :
body{
overflow:hidden; /* This will remove the default scroll, not really needed, safer nonetheless */
}
.right, .left{
overflow:auto; /* This will add a scroll when required */
width:50%;
float:left;
height: 100%
}
CSS overflow property을 살펴보면 div와 같은 특정 요소의 스크롤 막대를 사용하도록 설정할 수 있습니다. 요소에 너비와 높이를 설정해야합니다. 그렇지 않으면 내용에 맞게 확장됩니다.
덕분에, 난 .. 이제 궤도에 오전 각 사업부에 표시하기 위해 스크롤을 얻었다. –
예를 들어 주셔서 감사합니다. –
감사합니다. 그것은 오른쪽 스크롤바의 오른쪽에있는 흰색 스트립을 보았을 때를 제외하고는 작동합니다. 아마도 몸체가있는 공간 일 것입니다. 어떻게 피하는거야? –
@JohnLehmann 잘 모르겠습니다. 시도해 볼 수있는 작업 예제에 대한 링크가 있습니까? – Dan