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

88

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

다음 마크 업이 있습니다.

<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.

css 
— 드미트리 리크 텐
소스

답변:

39

수정 :

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

따라서 :

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;}

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

— prodigitalson
소스
고마워. 어쨌든 피를 흘리기로 결정하는 테이블과 재미도 있습니다. 테이블이 div와 동일한 동작을한다고 가정합니까?
— Dmitriy Likhten 2010
@Dimitry : 아니요, 요소 inline-block보다 더 비슷하게 만드는 특별한 규칙이 없습니다 block. 참고 내가 말했다 불구하고 더 같이 하지 동일하게 무엇 개봉 된 아마 경험하는 것은 달리 정의하지 않는 한 그들은 일반적으로 헤더의 일부는 / 세포가 그 긴 unwrappable 텍스트가 있다면 정말 짜증나는 할 수있는 모든 열을 수용 할 수 있도록 확장하는 것입니다 :-).
— prodigitalson 2010
도움을 주셔서 감사합니다 :) 문제에 대한 훨씬 더 완전한 개요를 제공하기 위해 질문을 약간 업데이트하고 모든 해결 방법이 한 섹션에 나열 될 수 있기를 바랍니다.
— Dmitriy Likhten 2010
나는 div # foo table # bar를 실험하고 너비를 설정했습니다 : table # bar의 100 %는 실제로 테이블을 확장하지만 테이블의 테두리 / 여백은 div # foo를 통해 흘러 나옵니다. 표시 할 테이블 설정 : 블록은 행의 너비 처리와 같은 테이블 렌더링의 다른 측면을 망치기 때문에 좋지 않습니다. 너비가 자동으로 설정되거나 설정되지 않은 경우 textarea # bar가 확장되지 않습니다.
— Dmitriy Likhten 2010
1
에 대한 textarea#bar당신은 해당 설정 할 수 있어야한다 display: block약간의 부작용과 함께. 표에 관한 한, 나는 ive가 과거에 그것에 대해 일종의 해결책 / 완화를 사용했음을 알고 있지만 지금은 그것이 무엇인지 기억하지 못합니다. 그러나 나는 일반적으로 테이블에 "여백"을 설정하지 않고 패딩 / 여백을 사용하여 div에 래핑한다고 말할 것입니다. 이것은 #foo 자체 또는 다른 div가 이러한 유형의 간격을 적용하기 위해 jsut를 사용하는 것일 수 있습니다. 또한 테두리 문제를 해결하여 행의 첫 번째 / 마지막 셀 / 첫 번째 / 마지막 행의 셀에만 테두리를 적용 할 수 있습니다
— prodigitalson
28

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

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

width: auto;
display: block;
— 마가목
소스
4
패딩을 설정하면는 bar100 %에 추가되어 bar부모보다 더 넓게 만들기 때문에 작동하지 않습니다 foo.
— prodigitalson 2010
네, 너무 빨리 대답했습니다. P
— Rowan
잠깐만. 그래서 width 속성을 무엇이든 설정하면 번식할까요? width : auto는 해결책이 아니라 너비를 전혀 설정하지 않는 것입니까?
— Dmitriy Likhten 2010
2
그래 맞아. display:block;(블록 레벨 요소라고도 함)가있는 모든 요소 는이 동작을 채택합니다. div 요소가있다 width:auto;그리고 display:block;기본적으로 설정합니다.
— Rowan
이전 게시물이지만 box-sizing : border-box를 사용하여 패딩이 요소의 너비 안에 있도록 할 수는 없습니다.
— CHBresser 2018
16

스타일 사용 

left: 0px;

또는 / 그리고

right: 0px;

또는 / 그리고

top: 0px;

또는 / 그리고

bottom: 0px;

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

— Tigsar
소스
4

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

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

— 드미트리 리크 텐
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.