부모를 채우기 위해 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와 랩 힘 작업 div에 대한 경계로 작업에 스타일 textarea.

---

수정 :

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

따라서 :

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

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

input#bar인라인 요소이므로 기본적으로 너비를 할당 할 수 없습니다. 그러나 textarea의 cols속성 과 유사하게 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;">

This way the table takes up the parent div 100%, and #barWrap is used to add borders/margin/padding to the #bar table. Note that you will need to set the background of the whole thing in #barWrap and have #bar's background be transparent or the same as #barWrap.

For textarea#bar and input#bar you need to do the same thing as table#bar, the down side is that by removing the borders you stop native widget rendering of the input/textarea and the #barWrap's borders will look a bit different than everything else, so you will probably have to style all your inputs this way.

참고URL : https://stackoverflow.com/questions/2232440/how-to-make-css-width-to-fill-parent