DIV의 높이를 동적으로 설정

Question

웹 애플리케이션에 브라우저 창의 너비에 따라 자동 너비가있는 DIV가 포함 된 페이지가 있습니다.

개체의 자동 높이가 필요합니다.DIV는 상단 화면에서 약 300px에서 시작하며 높이가 브라우저 화면 하단까지 늘어납니다.컨테이너 DIV에 대한 최대 높이가 있으므로 div에 대해 최소 높이가 있어야합니다.CSS에서 제한하고 Javascript를 사용하여 DIV의 크기 조정을 처리 할 수 있다고 생각합니다.

내 자바 스크립트가 예상만큼 좋지 않습니다.이 작업을 수행 할 수있는 쉬운 스크립트가 있습니까?

편집 : DIV에는 자체 오버플로 처리를 수행하는 컨트롤이 있습니다 (자체 스크롤 막대 구현).

Answer 1

이 간단하고 구체적인 기능을 사용해보세요. 라코 디스

지정되는 본문 상단으로부터의 현재 거리에 의존하지 않습니다 (300px가 변경되는 경우). <시간>

편집 : 그건 그렇고, 사용자가 브라우저의 크기를 변경할 때마다 해당 div에서 이것을 호출하고 싶을 것이므로 당연히 이벤트 핸들러를 연결해야합니다.

Answer 2

오버플로가 발생하면 어떻게 되나요?창의 맨 아래로만 이동하려면 절대 위치를 사용하십시오. 라코 디스

이렇게하면 각 측면에서 DIV 30px, 화면 상단에서 300px, 하단과 같은 높이가됩니다.콘텐츠가 div보다 큰 경우를 처리하기 위해 overflow:auto;를 추가합니다. <시간> 편집 : @ 누가 이것을 적어 놓았 든, 설명이 좋을 것입니다 ... 대답에 문제가 있습니까?

Answer 3

document.getElementById('myDiv').style.height = 500;

객체의 높이를 동적으로 조정하는 데 필요한 매우 기본적인 JS 코드입니다.자동 높이 속성이있는 곳에서 바로이 작업을 수행했지만 XMLHttpRequest를 통해 콘텐츠를 추가 할 때 부모 div의 크기를 조정해야했고이 offsetheight 속성이 IE6 / 7 및 FF3에서 트릭을 수행했습니다.

Answer 4

DIV에는 자체 오버플로 처리를 수행하는 컨트롤이 있습니다.

Answer 5

당신이 요청한 내용을 이해한다면이 방법을 사용하면됩니다. 라코 디스

Answer 6

사소한 수정 : 라코 디스

Answer 7

내가 생각할 수있는 가장 간단한 방법 ... 라코 디스

이제해야 할 일은 자동 크기 조정을 원하는 모든 것에 resizableHeight 클래스를 추가하는 것뿐입니다 (부모의 경우).

Answer 8

@ jason-bunting에서 영감을 얻었으며 높이 또는 너비에 대해서도 동일합니다. 라코 디스