Tôi mới ở đây và đã đăng ký vì tôi không thể tìm thấy câu trả lời của mình trong các nhóm hiện có.Chiều cao khung nhìn CSS: 100vh không hoạt động chính xác với nội dung trong div
Tôi đang cố gắng tạo trang web một trang và tôi muốn 'trang đích' có nền đầy đủ. Tôi đã có nền trên toàn bộ trang, nhưng khi tôi bắt đầu đặt văn bản trong div, nó đã phá vỡ. Tôi đã sử dụng css sau (sass):
.intro {
color: #fff;
height: 100vh;
background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center;
background-size: cover;
&--buttons {
position: absolute;
bottom: 2em;
}
}
p.hello {
margin: 30px;
}
.page1 {
color: #fff;
height: 100vh;
background: beige;
}
.page2 {
color: #fff;
height: 100vh;
background: black;
}
Với HTML sau:
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>My title</title>
</head>
<body>
<div class="container">
<div class="row">
<div id="intro" class="intro">
<div class="text-center">
<p class="hello">
Intro text is coming soon!
</p>
<div class="col small-col-12 intro--buttons">
<p>Buttons coming here.
</p>
</div>
</div>
</div>
<div id="page1" class="col col-12 page1">
<p>Tekst test</p>
</div>
<div id="page2" class="col col-12 page2">
<p>Tekst test.</p>
</div>
</div>
</div>
</body>
</html>
Bạn có thể xem kết quả ở đây: http://codepen.io/Luchadora/full/waYzMZ Hoặc xem bút của tôi: http://codepen.io/Luchadora/pen/waYzMZ
Như bạn thấy , khi định vị văn bản giới thiệu (p.hello {margin: 30px;}, kích thước nền đã thay đổi và không còn toàn màn hình nữa. (Btw: Tôi đã sử dụng nền ví dụ). Ngoài ra các trang khác có khoảng trắng bây giờ ..
Làm cách nào để khắc phục sự cố này? Tôi đã đọc các bài viết về chế độ xem, nhưng tôi nghĩ điều duy nhất tôi cần cho điều này là height: 100vh;, phải không? Cảm ơn trước!
Cảm ơn, công trình này! Cuối cùng tôi chỉ thêm '{padding: 1px;}' vào div với background (lớp '.intro'), nó cũng hoạt động. Ít nhất, trên phiên bản của tôi trên máy tính để bàn, nhưng không phải trong ví dụ Codepen. Nhưng bây giờ tôi có một thanh cuộn ngang, và 'overflow-x: hidden' không hoạt động, tôi vẫn đang tìm ra cái đó. Có vấn đề gì nếu tôi đặt '{padding: 1px;}' vào 'p' hoặc trên' intro div'? – Luchadora
ah ok, nếu bạn đã đặt chiều rộng và phần đệm được thêm vào, phần đệm sẽ được thêm vào chiều rộng (ví dụ: 100% + 2px). để giải quyết vấn đề này, bạn có thể thêm 'box-sizing: border-box' - điều này có nghĩa là bất kỳ padding nào sẽ được bao gồm trong chiều rộng. Phần đệm nên đi trên phần tử bao bọc 'p' (hoặc bất kỳ bố mẹ nào của nó) – Pete
cảm ơn bạn vì giải pháp và lời giải thích! Cuối cùng, tôi đã sửa nó bằng 'overflow-x: hidden' trên cả' html, body' trong css. – Luchadora