วิธีสร้างหน้าจอแบ่งครึ่ง (50/50) ด้วย CSS

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> 
  body { 
    font-family: Arial; 
    color: white; 
  } 
  h1{ 
    padding:20px; 
  } 
  .left,.right { 
    height: 100%; 
    width: 50%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    overflow-x: hidden; 
    padding-top: 20px; 
  } 
  .left { 
    left: 0; 
    background-color: rgb(36, 0, 95); 
  } 
  .right { 
    right: 0; 
    background-color: rgb(56, 1, 44); 
  } 
  .centered { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
  } 
  .centered img { 
    width: 150px; 
    border-radius: 50%; 
  } 
</style> </head> <body> <div class="left"> <h1>ข้อความสุ่มทางซ้าย</h1> </div> <div class="right"> <h1>ข้อความสุ่มทางขวา</h1> </div> </body> </html>

ผลลัพธ์

โค้ดด้านบนจะสร้างหน้าจอแบ่งครึ่ง 50/50 โดยมีสีพื้นหลังต่างกัน ทั้งสองด้านจะคงที่ (fixed) และครอบคลุมความสูงเต็มหน้าจอ