Làm cách nào để áp dụng 100% chiều cao cho div?

Tôi muốn làm cho div cuối cùng/thứ ba được lấp đầy toàn bộ không gian còn lại. Tôi đưa ra 100% chiều cao nhưng có thanh cuộn đang đến, mà tôi không muốn hiển thị. Tôi có bất kỳ giải pháp CSS cho cùng. nếu không thể từ css thì giải pháp jQuery/JS sẽ ổn.Làm cách nào để áp dụng 100% chiều cao cho div?

<html style="height:100%"> 
<head> 
    <style type="css"> 
     html , body { 
      width:100%; height:100%; 
      padding:0px; 
      margin:0px; 
     } 
    </style> 
</head> 
<body style="height:100%;padding:0px;margin:0px;"> 
    <div style="height:100%;width:100%"> 
     <div style="height:100px;background-color:#ddd">&nbsp;</div> 
     <div style="height:25px;background-color:#eee">&nbsp;</div> 
     <div style="display:block;height:100%;background-color:#ccc">&nbsp;</div> 
    </div> 
</body> 
</html>

Nguồn

2009-11-30 Wasim Shaikh

nếu nó đã được mở rộng và bạn không muốn cuộn tại sao không chỉ đặt chiều cao thành 90% chẳng hạn. – Drevak

Trong jQuery, bạn có thể thử một cái gì đó như thế này:

$(function() { 
    $(window).resize(function() { 
     $('div:last').height($(window).height() - $('div:last').offset().top); 
    }); 
    $(window).resize(); 
});

Bất cứ khi nào các cửa sổ được thay đổi kích cỡ, chiều cao div ngoái được sửa đổi để các div kéo dài đến dưới cùng của trang. Phương thức thay đổi kích thước của cửa sổ được gọi là tải trang để div được thay đổi kích thước ngay lập tức.

Nếu bạn trừ chênh lệch trên cùng của div từ chiều cao của cửa sổ, bạn sẽ có chiều cao tối đa sẵn có. Nếu quý vị có lợi nhuận, đường viền của padding áp dụng, bạn có thể phải điều chỉnh giá trị được khấu trừ, ví dụ:

$('div:last').height($(window).height() - $('div:last').offset().top - 30);

Giả sử bạn muốn 30px div từ dưới cùng của cửa sổ.

Nguồn

2009-11-30 09:29:08

không hoạt động trong IE7? –

Tinh chỉnh nhỏ này sẽ bao gồm padding/margin cho div, thay vì yêu cầu mã hóa cứng: '$ ('div: last'). Height ($ (window) .height() - $ ('div: last'). offset(). top - ($ ('div: last'). outerHeight (true) - $ ('div: last'). height())); ' – AaronSieb

Trên các trình duyệt hiện đại: thiết lập position: relative trên thùng div, position: absolute trên div thứ ba. Sau đó, bạn có thể định vị nó lên trên cùng và dưới cùng của vùng chứa cùng một lúc: top: 0px,

Nguồn

2009-11-30 08:20:48

Sử dụng điều này mặc dù, div bên trong sẽ không mở rộng nếu có một loạt các nội dung trong nó sẽ không? –

Có, nó sẽ mở rộng. –

Giải pháp tuyệt vời. Làm việc như dự định ở đây. – artur

Bạn cũng có thể sử dụng các cột giả bằng cách thêm một hình nền lặp lại theo chiều dọc vào CSS. xuất hiện. Bạn có thể thêm hình ảnh này vào div kết thúc tốt đẹp ba cột hoặc vào thẻ body.

Nếu các cột này có nội dung trong đó, có thể đáng để thêm một số vì các cột sẽ hoạt động khác nhau.

Nguồn

2009-11-30 08:44:26 matpol

Bạn có thể ẩn tràn trong DIV chứa:

<html> 
<head> 
    <style> 
     *{margin:0;padding:0;} 
     html,body{height:100%;} 
    </style> 
</head> 
<body> 
    <div style="overflow:hidden;height:100%"> 
     <div style="height:100px;background-color:#ddd"></div> 
     <div style="height:25px;background-color:#eee"></div> 
     <div style="height:100%;background-color:#ccc">&nbsp;</div> 
    </div> 
</body> 
</html>

Lưu ý rằng nội dung có thể biến mất khi thay đổi kích thước cửa sổ sử dụng kỹ thuật này.

Nguồn

2009-11-30 09:27:41 David

Nếu nội dung tăng lên thì nội dung đó sẽ bị ẩn. –

Bạn có thể sử dụng CSS height:100% (100% là chiều cao của khu vực hiển thị trong cửa sổ) ở chế độ quirks bằng cách không sử dụng DOCTYPE ở tất cả hoặc sử dụng JavaScript bị lỗi HTML 4.0 DOCTYPE (không có url .dtd)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<body style="margin:0; padding:0; overflow:hidden;"> 
<div style="height: 100%; background: red"></div> 
</body> 
</html>

Bạn có thể bỏ hoàn toàn <!DOCTYPE.. hoàn toàn, nó vẫn sẽ có tác dụng tương tự. overflow:hidden tuyên bố trong phong cách cơ thể là để thoát khỏi thanh cuộn trống trong IE. Nhưng hãy nhớ - đây là chế độ quirks có nghĩa là bạn đang ở trên lãnh thổ không thể đoán trước, mô hình hộp CSS khác với trình duyệt với trình duyệt!

Nguồn

2009-11-30 09:45:58 Andris

html style="height:100%"> 
<head> 
    <style type="css"> 
     html , body { 
       width:100%; 
       height:100%; 
       padding:0px; 
       margin:0px; 
     } 
    </style> 
</head> 
<body style="height:100%;padding:0px;margin:0px;"> 
    <div style="height:100%;"> 
     <div style="height:100px;background-color:#ddd">&nbsp;</div> 
     <div style="height:25px;background-color:#eee">&nbsp;</div> 
     <div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc">&nbsp;</div> 
    </div> 
</body> 
</html>

Có lẽ điều này có thể hoạt động ?! Nhưng tôi không biết điều gì sẽ xảy ra nếu có mutch văn bản ...

Nguồn

2009-11-30 09:52:23 Haiko

Đơn giản chỉ cần không lo lắng về nó nếu mục tiêu của bạn là để có màu sắc điền vào phía dưới.

Đặt màu của div ngoài và để kích thước thứ ba thay đổi kích thước của nó, tuy nhiên, nó muốn như nội dung đi vào.

<html style="height:100%"> 
<head> 
    <style type="css"> 
     html , body { 
       width:100%; height:100%; 
       padding:0px; 
       margin:0px; 
     } 
    </style> 
</head> 
<body style="height:100%;padding:0px;margin:0px;"> 
    <div style="height:100%;width:100%;background-color:#ccc"> 
     <div style="height:100px;background-color:#ddd">&nbsp;</div> 
     <div style="height:25px;background-color:#eee">&nbsp;</div> 
     <div style="">&nbsp;</div> 
    </div> 
</body> 
</html>

Nguồn

2009-11-30 10:02:18 Kales

Chiều cao của sản phẩm: 100%; ' sẽ hướng dẫn các trình duyệt chiếm 100% không gian màn hình có sẵn cho div cụ thể đó, có nghĩa là trình duyệt của bạn sẽ kiểm tra kích thước không gian duyệt web và trả lại cho công cụ CSS mà không kiểm tra xem có yếu tố nào bên trong nó hay không.

Cách giải quyết duy nhất mà tôi thấy phù hợp ở đây là sử dụng giải pháp do David cung cấp để sử dụng 'position: absolute; dưới cùng: 0; ' cho div đó.

Nguồn

2009-11-30 10:12:00

nó một chút xấu xí, nhưng nó hoạt động ..

<html style="height:100%"> 
    <head> 
     <style type="css"> 
      html , body { 
        width:100%; 
        height:100%; 
        padding:0px; 
        margin:0px; 
      } 
     </style> 
    </head> 
    <body style="height:100%;padding:0px;margin:0px;"> 
     <div style="width:100%;height:100%;"> 
      <div style="width:100%;height:100px;background-color:#ddd;">&nbsp;</div> 
      <div style="width:100%;height:25px;background-color:#eee;">&nbsp;</div> 
      <div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;">&nbsp;</div> 
     </div> 
    </body> 
</html>

Nguồn

2009-11-30 10:36:45

Dưới đây là một sửa chữa litle jquery tôi đã thực hiện:

<html> 
<head> 
<title>test</title> 
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height(); 
     $("#thirdDiv").height(heightToFill); 
    }); 
</script> 
</head> 
<body style="height: 100%; padding: 0px; margin: 0px;"> 
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;"> 
    <div id="firstDiv" style="height: 100px; background-color: #ddd"> 
     &nbsp;</div> 
    <div id="secondDiv" style="height: 25px; background-color: #eee"> 
     &nbsp;</div> 
    <div id="thirdDiv" style="background-color: #ccc;"> 
     &nbsp;a</div> 
</div> 
</body> 
</html>

Nguồn

2009-11-30 10:39:27 Jronny

Điều này khởi tạo chiều cao của div khi tải trang. Bạn cũng có thể cần phải thêm mã của Tatu Ulmanen để kích thước của div sẽ được thay đổi sau mỗi lần thay đổi kích thước cửa sổ. – Jronny

$(window).resize(function(){ 
     $('.elastic').each(function(i,n){ 
     var ph = $(this).parent().height(); 
     var pw = $(this).parent().width(); 
     var sh = 0; 
     var s = $(this).siblings().each(function(i,n){ 
      sh += $(this).height(); 
     }) 
     $(this).height(ph-sh); 
     sh = 0, ph = 0, s=0; 

    }); 
});

đặt sau đây trên trên thẻ script của bạn hoặc bên ngoài javascript. sau đó thay đổi

khi bạn đổi kích thước cửa sổ ... nó sẽ tự động khớp chiều cao của nó với không gian sẵn có ở phía dưới. bạn có thể có nhiều div như bạn muốn tuy nhiên bạn chỉ có thể có một đàn hồi bên trong bố mẹ đó. couldnt bị làm phiền để tính toán nhiều elastics :) hy vọng nó sẽ giúp

Nguồn

2010-01-06 16:43:48 Val

Hoạt động tốt mặc dù tôi đã cần sử dụng outerHeight/outerWidth thay vì chiều cao/chiều rộng thông thường. – Jamie

Bạn sẽ bù đắp điều này như thế nào? – Chozen

$(document).ready(function() { 
    var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height(); 
    $("#thirdDiv").height(heightToFill); 

    $(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height(); 
    $("#thirdDiv").height(heightToFill); 
});

này nên được bao gồm trong trường hợp trình duyệt được thay đổi kích cỡ ....

Nguồn

2012-01-10 08:33:36

Làm cách nào để áp dụng 100% chiều cao cho div?

Trả lời

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