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)
Bài liên quan
Nhớ hồi đó mình có làm làm thêm cái này vào đầu
Còn ko bạn có thể thay height: 100% = 100vh (chiều dài thì width: 100vw)
Mình test nó bao toàn màn hình mà ta
Wow, hay quá, làm được rồi
Cho e hỏi tại sao lại phải gọi selector là
htmlvàcssvậy a ? Việc setwidthvàheightcho 2 selectorhtmlvàcsscó ý nghĩa gì ? Vì sao e bỏ cái selectorhtmlđi thì nó không còn tác dụng ?Cái này cũng ok luôn (mà 2 cái đơn vị
vwvàvhlà 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á )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ỉ
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
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 )
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…
Mà khi em code như vầy:
thì nó lại xuất hiện thêm thanh scrollbar ngang & dọc là sao thế anh @drgnz ?
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 đó.
À, 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 ?
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/
Thì ra là vậy, mấy cha nội browser chơi tếu thật
Em biết bộ normalize này nè
Mà có 1 cách đơn giản mà nhanh là để:
đúng không anh ?
À nhầm, phải là:
mới đúng chứ