คุณสมบัติความสูง ของ CSS
ตัวอย่าง
กำหนดความสูงของสอง <div> องค์ประกอบ:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติกำหนด ความheightสูงขององค์ประกอบ
ความสูงขององค์ประกอบไม่รวมช่องว่างภายใน เส้นขอบ หรือระยะขอบ!
หากheight: auto;องค์ประกอบจะปรับความสูงโดยอัตโนมัติเพื่อให้แสดงเนื้อหาได้อย่างถูกต้อง
หากheightตั้งค่าเป็นตัวเลข (เช่น พิกเซล (r)em เปอร์เซ็นต์) หากเนื้อหาไม่พอดีกับความสูงที่ระบุ เนื้อหาจะล้น คอนเทนเนอร์จะจัดการกับเนื้อหาที่ล้นได้อย่างไรถูกกำหนดโดย
คุณสมบัติล้น
หมายเหตุ: คุณสมบัติ ความสูงต่ำสุดและ
ความสูง สูงสุดจะแทนที่
heightคุณสมบัติ
| ค่าเริ่มต้น: | รถยนต์ |
|---|---|
| รับการถ่ายทอด: | ไม่ |
| เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS1 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.height="500px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
ไวยากรณ์ CSS
height: auto|length|initial|inherit;
มูลค่าทรัพย์สิน
| Value | Description | Play it |
|---|---|---|
| auto | The browser calculates the height. This is default | |
| length | Defines the height in px, cm, etc. Read about length units | |
| % | Defines the height in percent of the containing block | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตั้งค่าความสูงขององค์ประกอบเป็น 50% ของความสูงขององค์ประกอบหลัก:
#parent {
height: 100px;
}
#child {
height: 50%;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS ความสูงและความกว้าง
กวดวิชาCSS: โมเดลกล่อง CSS
การอ้างอิง CSS: คุณสมบัติความกว้าง
การอ้างอิง HTML DOM: คุณสมบัติความสูง