VN-Lives: Tạo một div có chiều cao là 100% theo trình duyệt web? | How to make div 100% height of browser web window?

Chắc có một vài bạn khi thiết kế web sử dụng thông số "Height: 100%" với mong muốn là vùng div này sẽ được hiển thị với chiều cao tương ứng với trình duyệt web, nhưng kết quả lại không được như mong muốn. Bài viết này sẽ hướng dẫn cách 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 - Div 100% height of browser web window.</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 chỉ cần cấu hình thêm một thống số (height: 100%;) ở thẻ <html> và <body> là được.

Source Code - Mã Nguồn:

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - Div 100% height of browser web window.</title>

<style type='text/css'>
    body, html {
        height: 100%;
        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>

Demo:

Result - Kết quả:

Write: +Bui Ngoc Son

Tạo một div có chiều cao là 100% theo trình duyệt web? | How to make div 100% height of browser web window?

1 comment: