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

Xem: 5148    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 9 đánh giá ) File đã được kiểm thử


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.

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

Làm thẻ div có thanh cuộn (scrollbar) giống iFrame Đăng ngày 25-08-2014  Bài viết dưới đây sẽ giới thiệu với các bạn cách làm cho thẻ có thanh cuộn giống khi ta sử dụng iFrame để load một trang khác. 5/10 5148

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn