Làm thẻ div có thanh cuộn (scrollbar) giống iFrame

Bài viết dưới đây sẽ giới thiệu với các bạn cách làm cho thẻ <div> có thanh cuộn giống khi ta sử dụng iFrame để load một trang khác.

Trước hết chúng ta có ví dụ về đoạn mã HTML như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>example page</title>
</head>
<body>
<div id="page">
  <h1>Title</h1>
  <div id="scroll_box">
  <p>
    Put a long text in here. It will be crollable.<br/>
    Put a long text in here. It will be crollable.<br/>
    Put a long text in here. It will be crollable.<br/>
    Put a long text in here. It will be crollable.<br/>
    Put a long text in here. It will be crollable.<br/>
    Put a long text in here. It will be crollable.<br/>
    Put a long text in here. It will be crollable.<br/>
  </p>
</div>
<p>
  This content follows after the scrollable box.
</p>
</div>
</body>
</html>

Bây giờ chúng ta tiến hành style cho thẻ <div>, trước hết chúng ta cần phải đặt cố định chiều rộng và chiều cao của cho thẻ <div>

#scroll_box {
  height: 120px;
  width: 400px;
  ...
}

Để cho thẻ <div> hiển thị thanh cuộn chúng ta sẽ đặt thuộc tính display của thẻ <div> là auto

#scroll_box {
  height: 120px;
  width: 400px; 
  display: auto;
  border: 1px solid #CCCCCC;
  margin: 1em 0;
}

Khi bạn đưa nội dung dài hơn chiều cao và chiều rộng của thẻ <div> thì trình duyệt sẽ tự động sinh ra thanh cuôn ngang và thanh cuộn dọc giống như iFrame. Kỹ thuật này hiện có khá nhiều Website sử dụng để có cách thể hiện nội dung riêng biệt của mình.

Chủ đề CSS

Chủ đề HTML

SEO and SEM

Các phong cách thiết kế

Trình quản lý nội dung

Hướng dẫn thực hành

Tư liệu

Thư giãn

Liên kết hữu ích

Liên kết website

Vài nét về tác giả

Chào tất cả các bạn, tên tôi là Chu Hữu Trung. Thiết kế Web là nghề của tôi, hiện nay tôi đang sống và làm việc tại Hà Nội (Việt Nam). J.O.O.M Solutions là công ty tôi đang công tác. Tôi rất vui khi các bạn ghé thăm cssyeah.com