부모를 채우기 위해 CSS 너비를 만드는 방법은 무엇입니까?

Question

이 문제가 전에도 제기되었지만 대답을 찾지 못하는 것 같습니다.

나는 다음과 같은 마크 업이 있습니다

<div id="foo"> 
    <div id="bar"> 
     here be dragons 
    </div> 
</div> 

내 욕망은 푸 600px (width: 600px;)의 폭을 갖도록 바있는 다음 동작 할 수 있도록하는 것입니다 : 즉

padding-left: 2px; 
padding-right: 2px; 
margin-left: 2px; 
margin-right: 2px; 
outerWidth: 100%; 

을 막대의 너비를 592px으로 설정하는 대신 막대의 바깥 쪽 너비를 100%으로 설정하여 592px으로 계산하고 싶습니다. 여기에서 중요성은 foo의 너비를 800px으로 바꿀 수 있다는 것과 바는이 모든 인스턴스를 수동으로 계산해야하는 대신 렌더링 될 때를 계산한다는 것입니다.

순수 CSS에서 가능합니까? 테이블이

• 무엇 #bar 경우입니다 :

  그것으로 좀 더 재미

  ?
• #bar이 (가) 텍스트 영역 일 경우 어떻게해야합니까?

• #bar이 입력 인 경우 어떻게해야합니까?

• #foo이 테이블 셀 (td) 일 경우 어떻게됩니까? (이 변경에게 문제를 않거나 동일한 문제입니까?)

---

는 지금까지 table#bar이 input#bar이 논의되고있다. textarea # bar에 대한 좋은 해결책을 보지 못했습니다. 테두리/여백/패딩이 div 인 텍스트 영역이 textarea의 테두리로 작동하도록 지정된 div으로 작동한다고 생각합니다. 거의

Answer 1

편집 :

그럼 그 3 개의 다른 성분에는 모두 다른 redndering 규칙 haha가있다.

그래서 위해 :

table#bar 100 %로 폭을 설정해야합니다 그렇지 않으면 것이다 그것은 할 필요가 결정로만 할 넓게합니다. 그러나 테이블 행의 총 너비가 bar 너비보다 큰 경우 필요한 너비로 확장됩니다. 만약 내가 잠시 ive가 그것을 고쳐야했기 때문에 display: block !important;을 설정함으로써 이것을 회피 할 수 있습니다. (누군가 틀림없이 나를 실수하게 만들 것입니다.)

textarea#bar i beleive는 블록 레벨 요소이므로 div와 동일한 규칙을 따릅니다.여기서 유일한주의 사항은 textarea이 문자 열로 측정 된 cols 및 rows의 속성을 사용한다는 것입니다. 이 요소에 지정되면 CSS에 의해 지정된 너비가 대체됩니다.

input#bar은 인라인 요소이므로 기본적으로 너비를 지정할 수 없습니다. 그러나 textarea의 cols 속성과 유사하게 너비를 결정할 수있는 요소에는 size 속성이 있습니다. 즉, 당신은 항상 당신의 CSS에 display: block;을 사용하여 폭을 지정할 수 있습니다. 그런 다음 div와 동일한 렌더링 규칙을 따릅니다.

td#foo은 다소 미친 듯이 table-cell으로 렌더링됩니다. 결론은 귀하의 목적에 따라 그 내용의 너비를 제한하는 것처럼 div#foo처럼 행동 할 것입니다. 여기서 유일한 문제는 너비 설정을 무시하도록 어딘가에 열에 잠재적으로 풀릴 수없는 텍스트가 될 것입니다. 또한 열의 모든 셀은 가장 넓은 셀의 너비를 가져옵니다.

---

블록 수준 요소의 기본 동작 즉, 즉. 너비가 auto (기본값)이면 포함 요소의 내부 폭의 100 %가됩니다. 그래서 본질적으로 :

#foo {width: 800px;} 
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;} 

당신이 원하는 것을 정확하게 줄 것입니다.

Answer 2

, 단지 다른 방법 (outerWidth는 CSS 속성 없음) outerWidth: 100%;width: auto;에

을 변경 한 바 다음 스타일을 적용

width: auto; 
display: block; 

Answer 3

는 그래서 연구 한 후 다음을 발견 : display:block; width: auto;을 설정 div#bar를 들어

는 아래 언급 된 규칙 사업부에서 포장 할 필요가 table#bar를 들어 outerWidth:100%;

에 해당됩니다. 그래서 구조가된다 :

<div id="foo"> 
<div id="barWrap" style="border...."> 
    <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;"> 

이 방법은 테이블은 부모 div의 100 %를 차지하며 #barWrap는 #bar 테이블에 국경/여백/패딩을 추가하는 데 사용됩니다. 전체 배경을 #barWrap에 설정하고 #bar의 배경이 투명하거나 #barWrap과 같아야합니다.

이 textarea#bar 및 input#bar를 들어 당신이 table#bar 같은 일을 할 필요가, 아래쪽 측면 테두리를 제거하여 당신이 모든보다 약간 다르게 나타납니다 기본 위젯 입력/텍스트 영역의 렌더링과 #barWrap의 테두리를 중지한다는 것입니다 그렇지 않으면, 아마 모든 스타일을이 방법으로 스타일링해야 할 것입니다.

Answer 4

사용을 스타일

left: 0px; 

및/또는

right: 0px; 

및/또는

top: 0px; 

및/또는

bottom: 0px; 

나는`부모`foo`보다 넓은 bar` 작업가 100 % 효과적으로 만들기 위해 추가 될 것입니다 때문에 그가 패딩을 bar``에 여백을 설정하는 경우 작업을 실 거예요