ความแตกต่างระหว่างความสูง css: 100% เทียบกับความสูง: อัตโนมัติ

168

ฉันถูกถามคำถามในการสัมภาษณ์ว่า "อะไรคือความแตกต่างระหว่าง CSS height:100%และheight:auto?"

มีใครอธิบายได้บ้าง

css

— Gowsikan
แหล่งที่มา

237

height: 100% ให้องค์ประกอบความสูง 100% ของคอนเทนเนอร์หลัก

height: auto หมายถึงความสูงขององค์ประกอบจะขึ้นอยู่กับความสูงของลูก

ลองพิจารณาตัวอย่างเหล่านี้:

ความสูง: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv กำลังจะมี height: 50px

ความสูง: อัตโนมัติ

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv กำลังจะมี height: 10px

— Manish Mishra
แหล่งที่มา

6

ฉันคิดว่าในกรณีของ 'height: auto #innerDiv จะเป็น10px + the size it needs for its own content- ดูjsfiddle

— BornToCode

@Manish Mishra: การออกแบบที่ตอบสนองดีที่สุดคืออะไร? การตั้งค่าความสูงขององค์ประกอบลูกหรือองค์ประกอบคอนเทนเนอร์และปล่อยให้อีกส่วนหนึ่งรับความสูงได้หรือไม่

— John Strood

@ แจ็คมันทั้งหมดขึ้นอยู่กับสิ่งที่รูปลักษณ์ความรู้สึกและพฤติกรรมที่คุณคาดหวังจากการออกแบบของคุณในหน้าจอต่างๆและตามที่คุณเขียน CSS ของคุณ setting the height of the child element or the container elementไม่มีกฎดังกล่าวทั่วโลกที่เป็นอยู่ทั่วไป คุณสามารถทำสิ่งที่คุณต้องทำเพื่อให้บรรลุการออกแบบของคุณหากคุณทำตามความสอดคล้องบางอย่างหลีกเลี่ยงการทำซ้ำลดการทำงานซ้ำจัดกลุ่มเลย์เอาต์ทั่วไป ในระยะสั้นจะต้องมีระบบ / รูปแบบการทำงานของคุณเพื่อให้ง่ายต่อการอ่านและแก้ไขและแน่นอนความจริงที่ว่ามันทำงานได้

— Manish Mishra

2

ฉันคิดว่าวิธีคิดที่ดีเกี่ยวกับรถยนต์ก็คือคุณจะ 'ไม่ได้ตั้งค่า' ไว้สูง - มันเหมือนกับว่าไม่ได้ตั้งค่าไว้

— niico

1

ฉันแก้ไขซอที่ BornToCode ใช้ร่วมกันด้านบนเพื่อให้ชัดเจนยิ่งขึ้นซึ่งautoทำให้องค์ประกอบเติบโตขึ้นเพื่อรองรับเนื้อหาทั้งสองและเนื้อหาของเด็ก ในทางตรงกันข้ามค่าความสูงคงที่จะไม่ขยาย (หรือแสดง) เนื้อหาที่ไม่สามารถพอดีกับความสูงที่ประกาศ jsfiddle.net/m3f8y6xr/1คำตอบนี้ฉันเชื่อว่ามีคำไม่เพียงพอที่จะทำให้มันน่ากลัวว่าองค์ประกอบจะเติบโตเพื่อรวมเนื้อหาทั้งหมดไม่ว่าจะเป็นข้อความของตัวเองหรือเนื้อหาของเด็ก แน่นอนมันอาจเป็นที่ถกเถียงกันอยู่ว่าข้อความของตัวเองยังเป็นเด็ก สิ่งนี้ให้การยืนยันด้วยภาพของพฤติกรรม

— SherylHohman

5

สูง 100%สำหรับเป็นสันนิษฐานว่าความสูงของคุณภายในหน้าต่างเบราว์เซอร์เพราะนั่นเป็นความสูงของแม่หน้า autoความสูงจะเป็นความสูงต่ำสุดของจำเป็นที่จะต้องมี

— Rohit Azad
แหล่งที่มา

3

สิ่งนี้ไม่ถูกต้องถ้าองค์ประกอบหลักนั้นเป็นองค์ประกอบที่มีความสูงที่กำหนดซึ่งไม่พอดีกับขนาดของหน้าต่างเบราว์เซอร์

— goonerify

1

ค่าเริ่มต้นอยู่height: autoในเบราว์เซอร์ แต่height: X%กำหนดความสูงเป็นเปอร์เซ็นต์ของบล็อกที่มี

— Vahid Heydarinezhad
แหล่งที่มา

0

height: 100% ใช้งานได้ถ้าคอนเทนเนอร์พาเรนต์มีคุณสมบัติความสูงที่ระบุไม่เช่นนั้นจะใช้งานไม่ได้

— Chukwuemeka
แหล่งที่มา