동적 콘텐츠가 포함 된 두 개의 표 셀이 있습니다.하나의 표 셀 만 확장
표 셀 하나가 잘 작동합니다. 새 셀이 추가되어 표 셀 2보다 커지면 표 셀 2의 높이가 표 셀 1의 크기에 맞고 모든 항목이 유니버스에 적합합니다.
그러나 새로운 내용 (오버 플로우 숨겨진 디스플레이와 잘 작동했습니다 블록) 테이블 셀이 추가됩니다 때 오버 플로우가 발생하지 및 테이블 셀 (1)의 높이가 지금 테이블 셀 일치, 확장 2.내가 원하는 것은 표 셀 2에 더 많은 콘텐츠가 추가되면 표 셀 1까지 내용을 표시 한 다음 나머지는 숨겨집니다. 내가 자바 스크립트에서 할 수있는 이해, 그것 없이는 어떻게 할 수있는 아이디어?
가 여기에 JSFiddle입니다 : http://jsfiddle.net/dYsNx/
골 2 전용 콘텐츠에 COL1의 높이까지 가야한다, 나머지는 오버 플로우
오버 플로우를 숨겨야 : 그런 식으로 사용되어서는 안 숨겨. 하지만 개념을 알 수 있습니다.
기타, 귀하의 코드가 매우 깨끗하고 표준을 준수하지 않는 것을 보았습니다. 다음, #box에서 보시다시피 http://jsfiddle.net/Edditoria/TGfzA/
, overflow: hidden;은 왼쪽 상단/설정없이 position: relative;을 설정 그래서, (더 나은 희망)
다음 링크를 참조하시기 바랍니다 내 방식을 수정할 것입니다.
디스플레이를 피하려면 : 표 호환성 문제 인 IE < 7, CSS의 기본 div 디스플레이 설정을 유지하십시오. IE의 디스플레이 문제를 피하기 위해 고정 폭 너비가 아닌 %를 사용합니다!
col1이 동적 높이의 기준이라고 가정 할 때 아무 것도 없습니다.
col2 (및 다른 모든 열)에서 position: absolute; top: 0px; left: 50%;을 추가해야합니다.
나중에 열을 더 추가해야 할 수도 있으므로 col-x를 ID에서 class로 변경합니다.
코드에 대해 불편을 드려 죄송 합니다만, JSFiddle w/o 코드 힌트 및 기타 영광스런 자료를 처음부터 작성했습니다. 코드가 복사 및 붙여 넣기가 더 복잡하기 때문에 (표준 호환)]. 오버플로가 y 스크롤 막대를 표시한다고 가정하는 것을 잊었을 때를 제외하고는 완벽 할 것입니다. overflow-y : scroll; -하지만 적용 할 때 스크롤 막대가 잘립니다. - 난 그냥 두 번째 열 고정 된 높이의 인라인 블록을 유지하는 것, 그것은 덜 문제가 보인다. –
LOL, 나는 힌트도없이 엉망진창을 작성한다. 그리고 나는 영어로 나쁘다. 나는 그것을 알아 내려고 노력한다. 다시 보시려면 링크를 클릭 해주시겠습니까? 여분의 정보가 높이를 초과하는 대신 y 스크롤 막대가 필요할 때만 (자동) 나타납니다. 'height : 100 %; '를 추가하기 만하면됩니다. – Edditoria
감사합니다. –
순수한 CSS로는 불가능합니다. 이것은 CSS 2.1 사양 (http://www.w3.org/TR/CSS2/tables.html#height-layout)입니다.
CSS 2.1에서 셀 상자의 높이는 내용에 필요한 최소 높이입니다.
소자 박스 사용자 에이전트 회만 계산하는 "테이블 로우 '의 높이는 행의 모든 셀들이 가능 갖는다 : 그것은 은 행의 계산'높이 '계산'높이의 최대 값 '및 각 셀에 필요한 최소 높이 (MIN)를 지정합니다.
셀 2를 고정 폭으로 설정 했습니까? 표 셀은 크기를 고정하지 않으면 자연히 내용에 맞게 커집니다. –
몇 가지 코드를 보여줄 수 있습니까? 또는 JSFiddle?나는 당신의 문제를 정확하게 이해할 수 없다는 것을 의미합니다. 'colspan' 또는'rowspan'을 원하십니까? –
여기에 당신이 간다 : http://jsfiddle.net/dYsNx/ - Col 2는 내용의 col1의 높이까지 올라간다. 나머지는 overflow가 숨겨져 있어야한다. –