Tự động thay đổi kích thước div dựa trên kích thước của cửa sổ trình duyệt

Tôi đang cố gắng tìm ra cách để div tự động thay đổi kích thước, dựa trên kích thước của cửa sổ trình duyệt. Tôi đã thiết lập một jsbin minh họa vấn đề của tôi, ở đây: http://jsbin.com/uxomul Tự động thay đổi kích thước div dựa trên kích thước của cửa sổ trình duyệt

Điều tôi muốn làm là thay đổi kích thước div chứa hình ảnh sao cho div luôn lấp đầy những gì còn lại của chiều cao cửa sổ trình duyệt (ngoại trừ lề 25px ở dưới cùng, được đặt trên cơ thể).

Dưới đây là một bản demo rằng có lẽ minh họa những gì tôi muốn đạt được rõ ràng hơn: http://emilolsson.com/shop/demo/layers

Bất kỳ ý tưởng những gì sẽ là cách tốt nhất để tiếp cận này?

Nguồn

2012-01-03 INT

Bạn có thể làm một cái gì đó như thế này:

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25 chỉ là một số mẫu, ví dụ lợi nhuận của bạn (bạn có thể có được điều này tự động quá)

Bạn cũng có thể muốn bọc nó vào một hàm và gọi nó trên cả tải trang và đổi kích thước

Nguồn

2012-01-03 19:30:20 Andre

trình một cách hoàn hảo, không nghĩ rằng nó sắp sửa được dễ dàng, cảm ơn! Edit: Hiện tại tôi cần sử dụng -120 thay vì -25, tại sao? http://jsbin.com/afokor – INT

Có lẽ có những thứ khác mà bạn chưa cân nhắc, như biên giới, miếng đệm, lề cơ thể, vv Nếu bạn biết tất cả các yếu tố bạn cần, bạn có thể sử dụng 'jQuery (phần tử) .outerWidth (true) 'trên mỗi – Andre

Đặt chiều rộng qua $ (phần tử) .attr ('width', 100) sẽ đặt giá trị độ rộng, nhưng không thay đổi kích thước thành phần trên cuộc gọi. Đáng nói đến. Bạn cũng có thể sử dụng $ ('phần tử'). Css ('chiều rộng', '100px') làm thay đổi kích thước phần tử khi được gọi. – NuclearPeon

Bạn có thể cố gắng liên kết với sự kiện thay đổi kích thước của cửa sổ trình duyệt.

Ví dụ:

window.onresize = function() { 
//your code 
}

Nguồn

2012-01-03 19:25:11 scripto

Sử dụng vị trí CSS: tuyệt đối/tương đối kết hợp với CSS top/bottom/left/right. Ví dụ:

<!doctype html> 
<html> 
    <head> 
     <style> 
      html, body { margin:0; padding:0; width:100%; height:100%; } 

      #head   { width:100%; height:100px; background:black; color:white; } 
      #head > h1 { margin:0; } 

      #body   { position:absolute; width:100%; top:100px; bottom:25px; background:red; } 
      #body > div { position:absolute !important; } 
      #body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; } 
      #body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; } 
      #body-content > img { margin:25px; width:500px; vertical-align:middle; } 
     </style> 
    </head> 

    <body> 

     <!-- Head --> 
     <div id="head"> 
      <h1>Header</h1> 
     </div> 

     <!-- Body --> 
     <div id="body"> 

      <!-- Sidebar --> 
      <div id="body-sidebar"> 
       <h2>Sidebar</h2> 
      </div> 

      <!-- Content --> 
      <div id="body-content"> 
       <h2>Content</h2> 
       <img src="http://dl.dropbox.com/u/3618143/image1.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image2.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image3.jpg" /> 
      </div> 

     </div> 

    </body> 
</html>

Nguồn

2012-01-03 20:54:42

Hm, tôi đã thử điều này cả cục bộ lẫn trên jsbin (không phải là nó sẽ tạo ra bất kỳ sự khác biệt nào) nhưng nó dường như không hoạt động? http://jsbin.com/oxeqok – INT

Nó hoạt động với tôi cục bộ trong Chrome, FF, IE 7+, Safari và Opera. Ví dụ cho thấy ba phần: Đầu, Thanh bên và Nội dung. Cả Thanh bên và Nội dung đều điền vào trang theo chiều ngang (trừ lề dưới 25px). Đầu có chiều cao 100px và Thanh bên rộng 200px. Nội dung điền vào vùng còn lại và có các thanh cuộn để đơn giản, mặc dù việc tạo các hiệu ứng cuộn như trình chiếu tùy chỉnh (như trong ví dụ của bạn) có thể được thực hiện thay thế. Bạn thấy gì? –

Vị trí phải được sửa để nó sẽ được tự động thay đổi kích thước.

Nếu chiều cao màn hình thay đổi trong thời gian chạy

Đặt này trong bảng CSS:

#FitScreenHeight 
{ 
    position:fixed 
    height:100% 
}

Nguồn

2015-11-02 11:36:39 Tarek

Tôi không chắc chắn điều này hoạt động phổ biến. . . –

Tự động thay đổi kích thước div dựa trên kích thước của cửa sổ trình duyệt

Trả lời

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