JQuery: chiều cao năng động() với cửa sổ thay đổi kích thước()

Tôi đang gặp một vấn đề giống với tấm áp phích này: Jquery problem with height() and resize()JQuery: chiều cao năng động() với cửa sổ thay đổi kích thước()

Nhưng giải pháp không khắc phục vấn đề của tôi. Tôi có ba div xếp chồng lên nhau, và tôi muốn sử dụng JQuery để làm cho phần giữa điều chỉnh chiều cao đến 100% chiều cao cửa sổ, trừ đi chiều cao (23px * 2) của các div bên dưới khác là &. Nó hoạt động trên thay đổi kích thước, nhưng nó tắt (ngắn) 16px khi tài liệu ban đầu tải.

HTML

<body> 
<div id="bg1" class="bg">top</div> 
<div id="content"> 
    help me. seriously. 
</div> 
<div id="bg2" class="bg">bottom</div> 
</body>

CSS

html, 
body { 
    width:100%; 
    height:100%; 
} 

.bg { 
width:315px; 
height:23px; 
margin:0 auto; 
text-indent:-9000px; 
} 

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;} 
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;} 

#content { 
width:450px; 
margin:0 auto; 
text-align: center; 
}

JQuery

$(document).ready(function(){ 
    resizeContent(); 

    $(window).resize(function() { 
     resizeContent(); 
    }); 
}); 

function resizeContent() { 
    $height = $(window).height() - 46; 
    $('body div#content').height($height); 
}

Nguồn

2011-11-15 Gregir

Tôi đang tìm một thứ như thế này? Hay chân trang nên di chuyển với trang? http://www.cssplay.co.uk/layouts/basics2.html Một fiddle sẽ được tốt đẹp! – mrtsherman

Tôi có thể làm một cái gì đó như thế, nhưng tôi bị mắc kẹt với HTML sẽ được tạo ra phía máy chủ. Tôi đã được yêu cầu giải quyết vấn đề này với JQuery. – Gregir

Thụt lề văn bản 9000px là gì? – mrtsherman

Tôi cảm thấy như không nên có một giải pháp javascript, nhưng làm thế nào là điều này?

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() { 
    $('#content').height($(window).height() - 46); 
}); 

$(window).trigger('resize');

Nguồn

2011-11-15 03:19:05 mrtsherman

Thực ra, bạn có thể làm điều đó trong một dòng. Thậm chí ngắn hơn! – mrtsherman

Điều đó đã làm các thủ thuật, đủ kỳ quặc. Cảm ơn. – Gregir

https://jsfiddle.net/53hoq9w7/ – Pierre

Để xem chiều cao cửa sổ trong khi (hoặc sau) nó được thay đổi kích cỡ, hãy thử nó:

$(window).resize(function() { 
$('body').prepend('<div>' + $(window).height() - 46 + '</div>'); 
});

Nguồn

2011-11-15 03:11:45 SuSanda

Được rồi, làm thế nào về một câu trả lời CSS! Chúng tôi sử dụng display: table. Sau đó, mỗi div là hàng, và cuối cùng chúng tôi áp dụng chiều cao 100% đến giữa 'hàng' và voilà.

http://jsfiddle.net/NfmX3/3/

body { display: table; } 
div { display: table-row; } 
#content { 
    width:450px; 
    margin:0 auto; 
    text-align: center; 
    background-color: blue; 
    color: white; 
    height: 100%; 
}

Nguồn

2011-11-15 03:28:50 mrtsherman

Man! Tôi biết có một giải pháp CSS duy nhất! Bạn đã truyền cảm hứng cho tôi. Các bạn, thích giải pháp không phải JS này trước bất kỳ giải pháp JS nào. Nó không phải là sạch sẽ và bạn có thể cần phải sử dụng một số đánh dấu thêm, nhưng vẫn còn giá trị nó. –

Tại sao mọi người nghĩ CSS luôn tốt hơn JS? – barell

@barell Nó không phải là luôn luôn tốt hơn, nhưng nơi nó liên quan đến trình bày nó thường thích hợp hơn để sử dụng kiểu dáng một mình, thay vì thực hiện hành vi/logic là tốt. Một lợi ích bổ sung là CSS có khả năng đàn hồi bằng thiết kế, trong khi JavaScript thì dễ vỡ theo thiết kế. –

Giải pháp sạch nhất - cũng hoàn toàn CSS - sẽ được sử dụng calc và vh.

heigh Các div giữa sẽ được tính thusly:

#middle-div { 
height: calc(100vh - 46px); 
}

Đó là, 100% chiều cao viewport trừ đi 2 * 23 pixel. Điều này sẽ đảm bảo rằng trang tải đúng và động là (demo here).

Cũng nhớ sử dụng kích thước hộp, vì vậy các phần đệm và đường viền không làm cho các div vượt quá tầm nhìn.

Nguồn

2016-11-21 20:39:25

Hầu như tất cả các trình duyệt hiện tại đều hỗ trợ calc (ở đây: http://caniuse.com/#feat=calc) Và tương tự cho vh (ở đây: http://caniuse.com/#feat=viewport-units) –

JQuery: chiều cao năng động() với cửa sổ thay đổi kích thước()

Trả lời

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