01/10/2018, 01:15

Cách làm chiều cao của khối phủ toàn bộ màn hình trong CSS?

Như mn biết thì để set độ rộng của 1 khối div thì dùng width:100%; (thẻ div nằm trong thẻ body)
nhưng để set chiều cao của khối div đó toàn bộ màn hình thì phải làm thế nào ? Hay nói cách khác là chiều cao thẻ div đó phủ toàn trang (từ đầu đến cuối trang).
Code mẫu như sau:
HTML:

<html>
<body>
   <div class="block">Text</div>
</body>
</html>

CSS:

.block {
   background-color:black;
   opacity:0.4;
   filter:alpha(opacity=40);
   width:100%;
   height:100%; /* Not work! */
}

Em biết là không thể set value cho thuộc tính height 100% nhưng e lại không biết làm cách nào để chiều cao của khối phủ toàn trang hoặc toàn màn hình (để làm màn hình mờ lại khi xuất hiện popup)

*grab popcorn* viết 03:28 ngày 01/10/2018

Nhớ hồi đó mình có làm làm thêm cái này vào đầu

html, body {
  width: 100%;
  height: 100%;
}

Còn ko bạn có thể thay height: 100% = 100vh (chiều dài thì width: 100vw)

cdxf viết 03:20 ngày 01/10/2018
.block {
   background-color:black;
   opacity:0.4;
   filter:alpha(opacity=40);
   width:100%;
   height:100%; /* Not work! */
}
body{
  margin: 0px;
}

Mình test nó bao toàn màn hình mà ta

Long Dragon viết 03:16 ngày 01/10/2018

html, body {width: 100%;height: 100%;}

Wow, hay quá, làm được rồi
Cho e hỏi tại sao lại phải gọi selector là htmlcss vậy a ? Việc set widthheight cho 2 selector htmlcss có ý nghĩa gì ? Vì sao e bỏ cái selector html đi thì nó không còn tác dụng ?

Còn ko bạn có thể thay height: 100% = 100vh (chiều dài thì width: 100vw)

Cái này cũng ok luôn (mà 2 cái đơn vị vwvh là gì ấy nhỉ ? em chưa gặp 2 đơn vị này bao giờ do kiến thức hạn hẹp quá )

Mình test nó bao toàn màn hình mà ta

Kì nhể, mình cũng ghi y chang như vậy nhưng có full đâu

Mà cách anh @drgnz không cần phải có text bên trong khối div luôn, kinh thiệt

P/S: Mà em muốn là khi cửa số popup hiện ra thì màn hình sẽ tối lại, thì dùng các mẹo như trên được không anh @drgnz, hay là mình phải áp dụng thêm thuộc tính position nhỉ

*grab popcorn* viết 03:19 ngày 01/10/2018

Cho e hỏi tại sao lại phải gọi selector là html và css vậy a ? Việc set width và height cho 2 selector html và css có ý nghĩa gì ? Vì sao e bỏ cái selector html đi thì nó không còn tác dụng ?

width 100%, height: 100% dựa vào các thẻ cha.
Mà div là thẻ con của thẻ body và body là con của html nên ta cần phải cho chiều dài, cao của 2 thẻ này giãn ra 100% toàn màn hình thì cái div bên trong cũng sẽ được.

mà 2 cái đơn vị vw và vh là gì ấy nhỉ

vh = viewport height
vw = viewport width

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
https://www.w3.org/TR/css3-values/#viewport-relative-lengths

Long Dragon viết 03:15 ngày 01/10/2018

vh = viewport height vw = viewport width

Anh có thể tóm tắt sơ lược không ạ, chứ e yếu anh văn lắm nên không hiểu họ viết gì cả
(em đang gấp nên thông cảm giúp e nha a )

*grab popcorn* viết 03:21 ngày 01/10/2018

Cứ coi viewport là tầm hiển thị của website.
Vậy 1 vh = 1% chiều cao mà website có thể hiển thị.

Tương tự cho vw…

Long Dragon viết 03:27 ngày 01/10/2018

Mà khi em code như vầy:

<html>
<head>
<style>
.block {
       width: 100vw;
       height: 100vh;
       background-color: red;
}
</style>
</head>
<body>
       <div class="block"></div>
</body>
</html>

thì nó lại xuất hiện thêm thanh scrollbar ngang & dọc là sao thế anh @drgnz ?

*grab popcorn* viết 03:21 ngày 01/10/2018

Nếu bạn xài chrome dùng inspect element là biết ngay mà

Gợi ý là nó bị vậy là do 1 phần thẻ body đó.

Long Dragon viết 03:17 ngày 01/10/2018

À, thì ra là body element nó mặc định margin là 8px nên …
cho e hỏi vì sao default của body element lại là 8px ạ anh @drgnz ?

*grab popcorn* viết 03:28 ngày 01/10/2018

Vì chrome nó thích thế :v (thật đấy)
Thường các trình duyệt sẽ ngứa ngáy tay chân nên sẽ tùy chỉnh riêng mình một chút. Thế nên người ta sinh ra reset css để đồng bộ mọi trình duyệt lại 1 chuẩn.

Và cái file css để reset nhiều người dùng mình biết là cái này:
https://necolas.github.io/normalize.css/

Long Dragon viết 03:18 ngày 01/10/2018

Thường các trình duyệt sẽ ngứa ngáy tay chân nên sẽ tùy chỉnh riêng mình một chút. Thế nên người ta sinh ra reset css để đồng bộ mọi trình duyệt lại 1 chuẩn.

Thì ra là vậy, mấy cha nội browser chơi tếu thật

Và cái file css để reset nhiều người dùng mình biết là cái này:

Em biết bộ normalize này nè
Mà có 1 cách đơn giản mà nhanh là để:

body {
     margin: 0;
     padding: 0;
}

đúng không anh ?

Long Dragon viết 03:27 ngày 01/10/2018

À nhầm, phải là:

* {
     margin: 0;
     padding: 0;
     border: none;
}

mới đúng chứ

Bài liên quan
0