Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> div{ border:5px solid #00ff00; margin-bottom:100px; overflow:auto; } #test_1{width:200px;height:200px;} #test_2{width:400px;height:150px;} #test_3{width:200px;height:250px;} #test_4{width:300px;height:300px;} </style> </head> <body> <p>1) Nội dung vượt quá chiều rộng & chiều cao nên phần tử tạo thanh scroll ngang & dọc</p> <div id="test_1"> <img src="../image/sumo.jpg" style="width:280px"> </div> <p>2) Nội dung vượt quá chiều cao nên phần tử tạo thanh scroll dọc</p> <div id="test_2"> <img src="../image/sumo.jpg" style="width:280px"> </div> <p>3) Nội dung vượt quá chiều rộng nên phần tử tạo thanh scroll ngang</p> <div id="test_3"> <img src="../image/sumo.jpg" style="width:280px"> </div> <p>4) Nội dung không vượt quá kích thước nên phần tử không tạo thanh scroll</p> <div id="test_4"> <img src="../image/sumo.jpg" style="width:280px"> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> div{ border:5px solid #00ff00; margin-bottom:100px; overflow:auto; } #test_1{width:200px;height:200px;} #test_2{width:400px;height:150px;} #test_3{width:200px;height:250px;} #test_4{width:300px;height:300px;} </style> </head> <body> <p>1) Nội dung vượt quá chiều rộng & chiều cao nên phần tử tạo thanh scroll ngang & dọc</p> <div id="test_1"> <img src="../image/sumo.jpg" style="width:280px"> </div> <p>2) Nội dung vượt quá chiều cao nên phần tử tạo thanh scroll dọc</p> <div id="test_2"> <img src="../image/sumo.jpg" style="width:280px"> </div> <p>3) Nội dung vượt quá chiều rộng nên phần tử tạo thanh scroll ngang</p> <div id="test_3"> <img src="../image/sumo.jpg" style="width:280px"> </div> <p>4) Nội dung không vượt quá kích thước nên phần tử không tạo thanh scroll</p> <div id="test_4"> <img src="../image/sumo.jpg" style="width:280px"> </div> </body> </html>