Toàn bộ chiều cao khung nhìn div chỉ css không js ... Có thể?

Question

Ok, tôi đang cố gắng thu được div để chia tỷ lệ và chiều cao luôn là chiều cao của chế độ xem. Tôi sẽ liên kết với các ví dụ của tôi vì nó cần một số giải thích.

www.madmediablitz.com/tv/precentdemo.html

Liên kết ở trên là gần nhất tôi đã đi đến một giải pháp và tôi hy vọng rằng ai đó ở đây sẽ thấy nó đơn giản để sửa chữa. Những gì tôi muốn xảy ra là tv luôn luôn là chiều cao của khung nhìn (đến một mức độ, min-height: ~ 400px; max-height: ~ 700px;). Mã mà tôi đã sử dụng ở đó dựa trên http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/.

www.madmediablitz.com/tv/precentdemo_alt.html

một Đây là những gì tôi KHÔNG muốn xảy ra. NẾU bạn thay đổi kích thước cửa sổ của bạn, bạn sẽ thấy nó không tỷ lệ tương ứng.

Tôi đã thử cả hai trong số này trong khoảng 2 ngày và tôi chưa thể làm cho nó hoạt động. Tôi thực sự cầu nguyện để được giúp đỡ như tôi nghĩ, điều này không quá phức tạp.

Answer 1

html, body { 
    height: 100%; 
} 

Đọc this bài viết.

Answer 2

Bạn có thể sử dụng định vị tuyệt đối trong một cách khá bất ngờ tôi phỏng đoán:

div#element { 
    position: relative; 
} 

img.vertical { 
    position: absolute; 
    top: 0; // no need for px or em 
    bottom: 0; 
} 

Một trình duyệt tương thích nên cố gắng tôn trọng cả hai phía trên và chỉ dưới, thực sự quản lý một chiều cao đầy đủ.

Answer 3

Vui lòng xem: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

<div id="welcome"> 
    your content on screen 1 
</div> 

<div id="projects"> 
    your content on screen 2 
</div> 
div#welcome { 
    height: 100vh; 
    background: black; 
} 

div#projects { 
    height: 100vh; 
    background: yellow; 
} 

Vậy là xong.