Kênh 360 Công Nghệ Kênh 360 Công Nghệ

Trang chủ - Thiết kế web - HTML - CSS - Làm thẻ div có thanh cuộn scrollbar

Làm thẻ div có thanh cuộn scrollbar

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 scrollbar 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;
overflow:scroll; /*chú ý dòng này*/
}

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.

Cắt ảnh bằng CSS và HTML < Lùi   Tiếp theo > HTML căn bản phần 5
Tags:
Tin liên quan:
Tin mới hơn:
Tin cũ hơn:
Lần cập nhật cuối ( Thứ bảy, 14 Tháng 3 2009 22:56 )  

Kênh 360 công nghệ

  • Nổi bật
  • Tin mới
  • Game mới
  • PrestaShop Guide
  • PrestaShop

Có thể bạn quan tâm

Download nhiều nhất

11/12
 Download PES 2011 - FIFA 11
693
18/12
 binkw32 dll
175
18/12
 TeamViewerQS
49
English French German Japanese Korean