2012-05-31 4 views
0

CSS으로 이것을 달성 할 수있는 방법이 있습니까?
요소의 높이 = 100 % 마이너스 이전 요소 높이CSS 이전 요소

하십시오 이미 가지고 있기 때문에, 자바 스크립트 답변을 제공하지 않습니다

CSS :

.mydiv{ 
    height:100%; 
} 

자바 스크립트 (jQuery를)

사실 제 2의 효과를 재현하고 싶습니다. this demo CSS 만 사용하십시오.
감사

편집 : 내가 정확히 원하는 것은
달성하기 위해 : 나는 두 가지 요소는 부모, 에 수직으로 적합 할 첫 번째 요소 높이

+0

정말 그렇게하기 위해 JS가 필요합니다. 미안합니다. 나는 CSS에서 계산을하는 방법을 보지 못했다. – matthewvb

+1

CSS에서 '표현식'을 사용할 수있는 기능이 있지만 IE에서만 지원됩니다. 또한 CSS만으로 이전 요소를 참조 할 수있는 방법이 없습니다. [LESS] (http://lesscss.org/)와 같은 대체 스타일 시트 언어를 고려해보십시오. – Quantastical

+3

글쎄 실제로 ... 덜하고 SASS는 멋지지만 CSS 스타일러는 아니고 CSS 컴파일러입니다. 사실, 나는 CSS가 언어로서의 자격이 있다고 생각하지 않는다. 계속하십시오 ... –

답변

1

bottom를 사용하여 계산을 수행하지 않고 레이아웃을 달성 할 수있다. 하지만 컨테이너에 숨겨진 오버플로가 있어야합니다. 링크입니다. http://jsfiddle.net/UNnGP/4/

+0

Almoust perfect! FF, Chrome, Opera, Safari, IE9, IE8에서 정상적으로 작동합니다. IE7에서는 작동하지 않습니다. – skafandri

+0

IE7 데모에서 수정하기 위해'* + overflow : hidden'을 사용합니다. http : //jsfiddle.net/a3Bmx/, 다른 좋은 아이디어를 알고 싶습니다. – Koerr

0

없음을 지정하지 않고, 2 이유 :

  1. CSS에는 "이전"이라는 개념이 없습니다. 요소를 사용하는 선택기 (예 : "+", "~")가 있지만 이전에는 사용하지 않는 선택기가 있습니다.
  2. 나는 CSS의 상속력을 활용하는 영리한 방법이 있을지도 모른다고 생각했지만 그 중 하나는 효과가 없을 것이라고 생각했습니다. 부모의 높이를 50 %로 설정할 수는 있지만 원래 높이를 무시하므로 this.height - prev.height 유형의 일을 할 수있는 기회가 망가질 수 있습니다.

간단한 대답은 없습니다.

+0

정말, 그것은 1 가지 이유입니다. # 2는 두뇌 방귀가 더 많았습니다. –

+0

실제로 여기 물어 봐야 할 것은 그것이 그렇게 보이거나 그렇게 행동해야하는 경우입니다.왜냐하면 그것은 마치 할 수있는 것처럼 보일 뿐이 기 때문입니다. – easwee

1

당신은 예 당신이 할 수있는 There is the demo

+1

상위 div의 콘텐츠가 50px를 초과하면 어떻게됩니까? – easwee

+0

그리고 최상위 div의 콘텐츠가 50px 미만인 경우 어떻게해야합니까? ** ** 높이를 지정하고 싶지는 않습니다 ** – skafandri

+0

테이블 솔루션이 작동하지만 패딩, 여백 및 수직 정렬 작업 방식을 변경하는 것과 같은 다른 부작용이 있습니다. 당신이 정말로 어느 한쪽의 높이를 지정할 수 없다면 나는 부모의 두번째 상자에서 같은 배경을 두어 가짜로 만들 것입니다. (http://jsfiddle.net/XKUdy/1/) – swider

0

CSS

와이를 달성하기 위해 display:tabledisplay:table-row를 사용하여 두 top

http://jsfiddle.net/UNnGP/

+0

숨기기 때문에 도움이되지 않습니다. * * 내용 ** 표시하고자하는 내용 – skafandri

+0

글쎄, jquery 버전은 그렇게합니다. 또는 그것은 넘어서 흘러 간다. 보기 좋지 않다. –