วิธีสร้างความกว้าง CSS เพื่อเติมพาเรนต์?

ฉันแน่ใจว่าเคยถามปัญหานี้มาก่อน แต่ดูเหมือนจะหาคำตอบไม่ได้

ฉันมีมาร์กอัปต่อไปนี้:

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

ความปรารถนาของฉันคือทำให้ foo มีความกว้างของ600px( width: 600px;) และทำให้บาร์มีพฤติกรรมดังต่อไปนี้:

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

ในคำอื่น ๆ แทนการตั้งค่าความกว้างของแถบ592pxฉันต้องการที่จะกำหนดความกว้างของด้านนอกของบาร์เพื่อให้มีการคำนวณ100% 592pxความสำคัญตรงนี้คือฉันสามารถเปลี่ยนความกว้างของ foo เป็น800pxและแถบจะคำนวณเมื่อแสดงผลแทนที่จะต้องคำนวณทางคณิตศาสตร์สำหรับอินสแตนซ์ทั้งหมดเหล่านี้ด้วยตนเอง

เป็นไปได้ใน CSS บริสุทธิ์หรือไม่?

สนุกกับมันมากขึ้น:

• ถ้า#barเป็นตารางล่ะ?
• ถ้า#bartextarea คืออะไร?

• ถ้า#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's colsแอตทริบิวต์ก็มีsizeแอตทริบิวต์ในองค์ประกอบที่สามารถกำหนดความกว้าง ที่กล่าวว่าคุณสามารถระบุความกว้างได้ตลอดเวลาโดยใช้display: block;ใน css ของคุณ จากนั้นจะเป็นไปตามกฎการแสดงผลเช่นเดียวกับ div

td#fooจะถูกแสดงเป็นสิ่งtable-cellที่มีความบ้าคลั่งอยู่บ้าง บรรทัดล่างคือเพื่อจุดประสงค์ของคุณมันจะทำหน้าที่เหมือนกับการdiv#fooจำกัดความกว้างของเนื้อหา ปัญหาเดียวที่นี่จะเป็นข้อความที่ไม่สามารถแก้ไขได้ในคอลัมน์ที่ใดที่หนึ่งซึ่งจะทำให้ไม่สนใจการตั้งค่าความกว้างของคุณ นอกจากนี้เซลล์ทั้งหมดในคอลัมน์จะได้ความกว้างของเซลล์ที่กว้างที่สุด

นั่นคือพฤติกรรมเริ่มต้นขององค์ประกอบระดับบล็อก - เช่น ถ้า width คือ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;

ฉันคิดว่าสำหรับกรณีส่วนใหญ่ที่จะทำงาน

ดังนั้นหลังจากการวิจัยพบสิ่งต่อไปนี้:

สำหรับการ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's #barWrapพื้นหลังมีความโปร่งใสหรือเช่นเดียวกับ

สำหรับtextarea#barและinput#barคุณต้องทำสิ่งเดียวกันกับtable#barข้อเสียคือการลบเส้นขอบออกคุณจะหยุดการแสดงผลวิดเจ็ตเนทีฟของอินพุต / พื้นที่ข้อความและ#barWrapเส้นขอบจะดูแตกต่างจากอย่างอื่นเล็กน้อยดังนั้นคุณอาจจะต้อง จัดสไตล์อินพุตทั้งหมดของคุณด้วยวิธีนี้

box-sizing: border-box;
width: 100%;
padding: 5px;

ขนาดกล่อง: กล่องชายแดน; ทำให้ช่องว่างภายในระยะขอบและเส้นขอบรวมอยู่ในการคำนวณความกว้าง

นพ