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

이 문제가 이전에 요청 된 적이 있지만 답을 찾을 수없는 것 같습니다.

다음 마크 업이 있습니다.

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

내 욕망은 foo를 600px( width: 600px;) 너비 로 만들고 bar가 다음과 같은 동작을 갖도록 만드는 것입니다.

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

즉, 막대의 너비를로 설정하는 대신 막대 592px의 바깥 쪽 너비를로 설정하여 100%로 계산되도록하고 싶습니다 592px. 여기서 중요한 점은 내가 foo의 너비를로 변경할 수 800px있고 bar가 렌더링 될 때 이러한 모든 인스턴스에 대해 수학을 수동으로 수행하는 대신 계산한다는 것입니다.

순수한 CSS에서 가능합니까?

그것으로 좀 더 재미 :

  • #bar테이블 이면 어떨까요?
  • 어떤 경우 #bar텍스트 영역은 무엇입니까?
  • #bar입력이 있다면 어떨까요?

  • 어떤 경우에하는 #foo테이블 셀입니다 ( td)? (이로 인해 문제가 변경됩니까? 아니면 문제가 동일합니까?)


지금까지 table#bar, input#bar논의되고있다. textarea # bar에 대한 좋은 솔루션을 보지 못했습니다. 테두리 / 여백 / div랩이 있는 패딩이없는 텍스트 영역 divtextarea.



답변

수정 :

이 세 가지 요소는 모두 렌더링 규칙이 다릅니다.

따라서 :

table#bar너비를 100 %로 설정해야합니다. 그렇지 않으면 필요한만큼만 너비가됩니다. 그러나 테이블 행의 총 너비가 너비보다 크면 bar필요한 너비로 확장됩니다. 내가 기억한다면 당신은 display: block !important;ive가 그것을 고쳐야 한 이후로 잠시 동안 설정함으로써 이것을 막을 수 있습니다 . (내가 틀렸다면 누군가 나를 바로 잡을 것입니다).

textarea#bari beleive는 블록 수준 요소이므로 div와 동일한 규칙을 따릅니다. 여기서주의해야 할 점은있다 textarea의 속성을 cols하고 rows문자 컬럼에서 측정한다. 이것이 요소에 지정되면 CSS에서 지정한 너비를 재정의합니다.

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

td#footable-cell약간의 광기 가있는로 렌더링됩니다 . 요점은 귀하의 목적 div#foo에 따라 내용의 너비를 제한하는 것처럼 작동한다는 것 입니다. 여기서 유일한 문제는 너비 설정을 무시하게 만드는 열의 줄 바꿈 불가능한 텍스트 일 ​​것입니다. 또한 열의 모든 셀은 가장 넓은 셀의 너비를 얻습니다.


이것이 블록 레벨 요소의 기본 동작입니다. 너비가 auto(기본값)이면 포함하는 요소의 내부 너비의 100 %가됩니다. 그래서 본질적으로 :

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

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


답변

거의, 단지 변경 outerWidth: 100%;width: auto;(outerWidth는 CSS 속성 없음)

또는 막대에 다음 스타일을 적용하십시오.

width: auto;
display: block;


답변

스타일 사용

left: 0px;

또는 / 그리고

right: 0px;

또는 / 그리고

top: 0px;

또는 / 그리고

bottom: 0px;

나는 그 일을 할 대부분의 경우에 대해 생각합니다


답변

따라서 연구 후에 다음이 발견되었습니다.

A에 대한 div#bar설정 display:block; width: auto;의 등가 원인outerWidth:100%;

의 경우 table#bar아래에 명시된 규칙에 따라 div로 래핑해야합니다. 따라서 구조는 다음과 같습니다.

<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#barinput#bar똑같은 작업을해야합니다. table#bar단점은 테두리를 제거하면 입력 / 텍스트 영역의 기본 위젯 렌더링이 중지되고 #barWrap의 테두리가 다른 모든 항목과 약간 다르게 보일 수 있다는 것입니다. 이 방식으로 모든 입력을 스타일링하십시오.


답변