Tôi đang gặp sự cố với che phủ chiều cao 100% div. Tôi có thể sử dụng vị trí cố định để giải quyết trang bìa, nhưng đó không thực sự là thứ tôi muốn bởi vì bạn có thể cuộn xuống 'bìa'> để những người có độ phân giải thấp hơn tôi có thể xem toàn bộ nội dung.Đặt chiều cao 100% trên div tuyệt đối

Mã dụ:

HTML

<body> 
<div>Overlay example text</div> 
</body>

CSS

body { 
    float: left; 
    height: 3000px; 
    width: 100%; 
} 
body div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
}

Vấn đề: của div chiều cao 100% chỉ chứa 100% của webbrowser/khung nhìn, nhưng tôi muốn nó bao phủ toàn bộ cơ thể.

Cảm ơn trước :)

Nguồn

2013-01-08 Nworks

sử dụng JQUery để thay đổi kích thước DIV của bạn với vị trí tuyệt đối – Maysam

Điều này là vấn đề số một với CSS..'min-height' không thực sự hứa tên gì ngụ ý:/ – vsync

http://jsbin.com/ubalax/1/edit .Bạn có thể xem kết quả ở đây

body { 
    position: relative; 
    float: left; 
    height: 3000px; 
    width: 100%; 
} 
body div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top:0; 
    left:0; 
    background-color: yellow; 
}

Nguồn

2013-01-08 15:04:16 ashley

Được rồi, vì vậy mọi người đang trên đường đến một câu trả lời đúng nhưng phao đó: trái và vị trí: tương đối trên cơ thể đã giải quyết nó. Cảm ơn! – Nworks

Tôi có ý tưởng ZERO tại sao nó hoạt động, nhưng nó ... đây là một trong những khoảnh khắc buồn khi bạn khám phá ra một thực tế mà phisics ngừng hoạt động. – vsync

Cảm ơn tuyệt vời vì đã dành thời gian và nỗ lực của bạn –

thử thêm

position:relative

đến phong cách cơ thể bạn. Bất cứ khi nào định vị bất cứ điều gì hoàn toàn, bạn cần một trong các thùng chứa cha mẹ để được định vị tương đối vì điều này sẽ làm cho mục được định vị tuyệt đối cho vùng chứa mẹ tương đối.

Như bạn không có các yếu tố liên quan, các css sẽ không biết những gì các div là hoàn toàn vị trí để và do đó sẽ không biết phải mất 100% chiều cao của

Nguồn

2013-01-08 15:01:48 Pete

Cảm ơn thông tin hữu ích, tôi phải đặt một phao: để nó hoạt động :) – Nworks

float bên trái là trong mã ban đầu của bạn và không có sự khác biệt: http://jsfiddle.net/rvKPq/3/ – Pete

Đối với bất cứ ai đọc: Tôi nghĩ rằng đây nên là câu trả lời đúng (và có một upvote cao hơn), vì nó là người đầu tiên cung cấp giải pháp một cách chính xác và giải thích thêm cho giải pháp chứ không chỉ là cách dán mã. –

Một vài câu trả lời đã đưa ra giải pháp với chiều cao và chiều rộng 100% nhưng tôi khuyên bạn không nên sử dụng tỷ lệ phần trăm trong css, sử dụng vị trí trên cùng/dưới cùng và trái/phải.

Đây là cách tiếp cận tốt hơn cho phép bạn kiểm soát ký quỹ.

Đây là mã:

body { 
    position: relative; 
    height: 3000px; 
} 
body div { 

    top:0px; 
    bottom: 0px; 
    right: 0px; 
    left:0px; 
    background-color: yellow; 
    position: absolute; 
}

Nguồn

2013-01-08 15:08:04

Đây là giải pháp phù hợp với tôi. Tôi không bao giờ biết bạn có thể kéo dài một hình ảnh theo vị trí. –

Toàn bộ kéo dài (ngang/dọc)

Câu trả lời được chấp nhận là rất tốt. Chỉ muốn chỉ ra một số điều cho những người khác đến đây. Lợi nhuận là không cần thiết trong những trường hợp này. Nếu oyu muốn bố cục trung tâm với "Lề ký tự" cụ thể, bạn có thể thêm chúng vào bên phải và bên trái, như vậy:

.stretched { 
    position: absolute; 
    right: 50px; top: 0; bottom: 0; left: 50px; 
    margin: auto; 
}

Điều này cực kỳ hữu ích.

trung div (dọc/ngang)

Là một tiền thưởng, định tâm tuyệt đối mà có thể được sử dụng để có được định tâm cực kỳ đơn giản:

.centered { 
    height: 100px; width: 100px; 
    right: 0; top: 0; bottom: 0; left: 0; 
    margin: auto; 
    position: absolute; 
}

Nguồn

2014-01-30 20:39:04

Một giải pháp mà không sử dụng bất kỳ chiều cao nhưng vẫn lấp đầy 100% có sẵn Chiều cao. Thanh toán ví dụ này trên codepen. http://codepen.io/gauravshankar/pen/PqoLLZ

Đối với html và nội dung này phải có chiều cao 100%. Chiều cao này bằng chiều cao khung nhìn.

Đặt vị trí div bên trong tuyệt đối và đặt trên cùng và dưới cùng 0. Thao tác này sẽ điền div vào chiều cao sẵn có. (Chiều cao tương đương với cơ thể.) Mã

html: Mã

<head></head> 

<body> 
    <div></div> 
</body> 

</html>

css:

* { 
    margin: 0; 
    padding: 0; 
} 

html, 
body { 
    height: 100%; 
    position: relative; 
} 

html { 
    background-color: red; 
} 

body { 
    background-color: green; 
} 

body> div { 
    position: absolute; 
    background-color: teal; 
    width: 300px; 
    top: 0; 
    bottom: 0; 
}

Nguồn

2015-04-24 09:49:48 Gaurav

Thay vì sử dụng body, sử dụng html làm việc cho tôi:

html { 
    min-height:100%; 
    position: relative; 
} 

div { 
    position: absolute; 

    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    left: 0px; 
}

Nguồn

2016-09-26 11:29:08 Misja

Đặt chiều cao 100% trên div tuyệt đối

Trả lời

Toàn bộ kéo dài (ngang/dọc)

trung div (dọc/ngang)

Các vấn đề liên quan