Tôi đang cố gắng đặt div của mình với một số ghi chú ở góc dưới bên phải bên phải vị trí của màn hình sẽ được hiển thị mọi lúc.Cách đặt vị trí div ở góc dưới cùng bên phải của trình duyệt?
Tôi đã sử dụng sau css cho nó:
#foo
{
position: fixed;
bottom: 0;
right: 0;
}
Nó hoạt động tốt với Chrome 3 và Firefox 3.6 nhưng IE8 sucks ...
những gì có thể là một giải pháp phù hợp cho nó?
đoạn này hoạt động trong IE7 ít nhất
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<style>
#foo {
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="foo">Hello World</div>
</body>
</html>
Hãy thử điều này:
#foo
{
position: absolute;
top: 100%;
right: 0%;
}
Tôi nghĩ rằng sẽ làm cho cạnh trên dưới cạnh dưới cùng của các yếu tố phụ huynh. –
Không. 100% là screen.height - element.height. – Cipi
Tôi không có IE8 để kiểm tra này ra, nhưng tôi khá chắc chắn nó sẽ làm việc:
<div class="screen">
<!-- code -->
<div class="innerdiv">
text or other content
</div>
</div>
và css:
.screen{
position: relative;
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
}
Điều này sẽ đặt .innerdiv ở góc dưới cùng bên phải của lớp màn hình. Tôi hy vọng điều này sẽ giúp :)
Bạn đang sử dụng DOCTYPE nào? Suy nghĩ về chế độ "tương thích" của IE " – sewa
none ..." nên được sử dụng? – KoolKabin
Liên quan đến bình luận IE6 của bạn dưới đây, IE6 không hiểu 'vị trí: cố định;'. Vì vậy, những gì bạn làm là có một div bao bọc có 'vị trí: tương đối;' điền toàn bộ màn hình và sau đó bạn định vị div bạn muốn với 'position: absolute;'. Tuy nhiên, nếu trang web của bạn cuộn xuống, bạn cần sử dụng các biểu thức CSS trong IE6 để giữ cho div được gắn vào góc dưới cùng bên phải. – Strelok