 | Trong một vài thiết kế, bạn sẽ mong muốn tạo một div mà trong đó chiều cao của nó luôn được thể hiện 100% giống với kích thước của trình duyệt web, và khi trình duyệt thay đổi chiều cao thì chiều cao của div sẽ được thay đổi theo. Bài viết này sẽ hướng dẫn sử dụng thông số viewport-percentage để xử lý vấn đề này. |
Problem - Vấn dề:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - Make div 100% height demo.</title>
<style type='text/css'>
body, html {
margin:0;
}
#div_demo {
height: 100%;
background:#f00;
color:#fff;
}
</style>
</head>
<body>
<div id="div_demo">VN-Lives | Bui Ngoc Son | developer.bnson@gmail.com</div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - Make div 100% height demo.</title>
<style type='text/css'>
body, html {
margin:0;
}
#div_demo {
height: 100%;
background:#f00;
color:#fff;
}
</style>
</head>
<body>
<div id="div_demo">VN-Lives | Bui Ngoc Son | developer.bnson@gmail.com</div>
</body>
</html>
Giả sử ta có một trang HTML như trên, bạn nhập thấy rằng ta định Height của div là 100% nhưng một 100% thì nó hiểu theo nghĩa là 100% theo nội dung theo thẻ div, bạn có thể thấy rõ hỗ ở hình bên dưới.
Nhưng mong muốn của chúng ta là chiều cao của div phải có chiều cao tương ứng với chiều cao của trình duyệt web. như hình bên dưới.
Solution - Giải Pháp:
Để giải quyết vấn đề này ta sẽ sử dụng thông số viewport-percentage(height:100vh;) để xử lý, với thông số này chiều cao của div sẽ tương ứng với chiều cao của trình duyệt web.
Source Code - Mã Nguồn:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - jsFiddle demo.</title>
<style type='text/css'>
body {
/* This is used to reset any browser-default margins. */
/* Thông số này được dùng để chuyển margins của bất cứ trình duyệt nào về mặc định. */
margin:0;
}
div {
/* The viewport-percentage lengths are relative to the size of the initial containing block.
When the height or width of the initial containing block is changed, they are scaled accordingly.*/
/* viewport height là một đơn vị của w3,
dùng để chỉ định kích thước theo trình duyệt,
nghĩa là trình duyệt thay đổi thì nó cũng sẽ thay đổi theo.*/
height:100vh;
background:#f00;
color:#fff;
}
</style>
</head>
<body>
<div>VN-Lives | Bui Ngoc Son | developer.bnson@gmail.com</div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - jsFiddle demo.</title>
<style type='text/css'>
body {
/* This is used to reset any browser-default margins. */
/* Thông số này được dùng để chuyển margins của bất cứ trình duyệt nào về mặc định. */
margin:0;
}
div {
/* The viewport-percentage lengths are relative to the size of the initial containing block.
When the height or width of the initial containing block is changed, they are scaled accordingly.*/
/* viewport height là một đơn vị của w3,
dùng để chỉ định kích thước theo trình duyệt,
nghĩa là trình duyệt thay đổi thì nó cũng sẽ thay đổi theo.*/
height:100vh;
background:#f00;
color:#fff;
}
</style>
</head>
<body>
<div>VN-Lives | Bui Ngoc Son | developer.bnson@gmail.com</div>
</body>
</html>
Demo:
Result - Kết quả:
Writer: +Bui Ngoc Son
No comments:
Post a Comment