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

#1

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)

1 Like
#2

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)

3 Likes
#3 
.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

#4

Wow, hay quá, làm được rồi :joy:
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 ?

Cái này cũng ok luôn :grin: (mà 2 cái đơn vị vw và vh 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á :frowning:)

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

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

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ỉ :thinking:

#5

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.

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

3 Likes
#6

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ả :frowning:
(em đang gấp nên thông cảm giúp e nha a :sweat: )

#7

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…

2 Likes
#8

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 ?

#9

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

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

2 Likes
#10

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

1 Like
#11

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/

1 Like
#12

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

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

body {
     margin: 0;
     padding: 0;
}

đúng không anh ?

1 Like
#13

À nhầm, phải là:

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

mới đúng chứ :smiley:

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?