각도로 선택한 다중 선택 드롭

Question

각도 선택 다중 선택 요소가 폼의 맨 아래에 있으며 드롭 다운 상자가 아닌 드롭 다운 상자로 만들고 싶습니다. Angular-chosen에는 드롭 다운 옵션이없는 것 같습니다. 다음과 같이 선택 요소에 의해 생산 HTML은 다음과 같습니다

<select multiple chosen> 
    <div class="chosen-container chosen-container-multi"> 
     <ul class="chosen-choices"> 
     ... 
     </ul> 
     <div class="chosen-drop"> 
     ... 
     </div> 
    </div> 

내가 위로 이동하려는 .chosen 드롭 DIV입니다.

요소를 올바른 위치로 이동하기 위해 .chosen-drop 요소의 CSS 상단 값을 설정하면 위치가 완벽하지만 항목을 거의 또는 전혀 찾지 않고 목록을 필터링하면 드롭 다운 목록이 상대적으로 축소됩니다 드롭 다운 요소의 상단에 드롭 다운 (부모 div 위)과 부모 div 상단 사이에 간격을두고

.chosen-drop 요소의 CSS 하단 값을 부모 위로 이동하도록 설정하면 항목을 필터링하면 아래쪽으로 축소되어 드롭 다운과 부모 div 사이의 틈이 제거되지만 더 많은 항목이 선택한 경우 상위 div의 높이가 증가하여 드롭 다운 (드롭 다운) 상자의 필수 위치가 변경됩니다. 이것은 CSS 하단 값이 .chosen-drop div의 하단을 부모 div의 하단을 기준으로 유지하기 때문입니다.

.chosen-drop div의 하위 값을 상위 div의 상단에 상대적으로 설정하는 방법이 있습니까?

Answer 1

당신은 당신의 부모 DIV는 CSS에서 CALC()를 사용하여 즉석에서 차이를 계산하여 크기가 증가 할 수 때마다 공식에 chosen-drop의 위치의 바닥을 설정할 수 있습니다

.chosen-drop { bottom: calc(100% - px); }

100 %는 부모 div의 너비에서 뺍니다. px는 div의 아래쪽에 추가 할 채우기 양 (픽셀 단위)입니다. css3에 추가 된 멋진 기능이라고 생각되는 간단한 계산을 위해 calc를 사용할 수 있습니다.

.chosen-drop { bottom: calc(100%); }

하거나

.chosen-drop { bottom: 100%; }

: 귀하의 경우

당신은 (사업부의 전체 높이), 동봉 된 chosen-drop DIV 그것은 그 부모의 상단 우측되고 싶어

calc()은 CSS3 표준이며 이전 버전의 브라우저와 호환되지 않을 수 있습니다. calc()here과 같은 더 흥미 진진한 내용을 읽을 수 있습니다.