Giới thiệu về hàm calc() trong CSS

Đôi lời

Chào các bạn. Mình là Minh, hiện tại đang làm Front End Developer tại công ty Framgia. Đối với một Front End Dev như mình, dựng layout cho websites là công việc hàng ngày, và đảm bảo các websites này tương thích với các trình duyệt cũng như responsive là yêu cầu bắt buộc. Sau đây mình sẽ nói về một bài toán khá là cơ bản khi dựng layout.

Bài toán

Yêu cầu: Dàn layout 2 cột Navigation và Main Content như hình bên dưới với cùng chiều cao là 500px, độ rộng của Navigation là 300px, Navigation cách Main Content một khoảng 30px, Main Content có độ rộng là phần còn lại.

HTML

<div class='container'>
    <div class='navigation'>Navigation Here</div>
    <div class='main-content'>Main Content Here</div>
</div>

Với yêu cầu bài toán như vậy, ta có thể có một vài cách để CSS như sau: Cách 1

.navigation { 
  height: 500px;
  awidth: 28%;
  margin-right: 2%;
  float: left;
}

.main-content{
  awidth: 70%;
  height: 500px;
  float: left;
}

Demo Cách 1 Cách 1 này code viết rõ ràng mạch lạc đấy nhưng độ rộng đang tính theo đơn vị % nên chưa đáp ứng chính xác yêu cầu của bài toán, thử Cách 2 xem nhé.

Cách 2

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  awidth: 300px;
}

.main-content{
  awidth: 100%;
  height: 500px;
}

Demo Cách 2 Sau khi xem demo Cách 2 , chúng ta thấy cách này làm đúng như yêu cầu bài toán, có điều mình thấy code chưa thật tốt, set cho thằng Navigation và Main Content mà phải lôi cả cha của nó vào Container để style. Haizz.

Có một giải pháp mà giải quyết được cả 2 vấn đề ở Cách 1 và Cách 2. Đó là dùng hàm calc(), để biết cách dùng như thế nào, hãy lăn chuột xuống và tiếp tục đọc nhé