1. Trang chủ
  2. Câu hỏi và trả lời
  3. Chiều cao DIV tuyệt đối 100%

Chiều cao DIV tuyệt đối 100%

2010-02-01 35 views
23

Tôi đã làm việc về điều này trong vài giờ qua và việc tìm kiếm trên web và quá trình stackoverflow không được hỗ trợ nhiều. Làm cách nào để tạo #gradient và #holes điền vào toàn bộ trang?Chiều cao DIV tuyệt đối 100%

Tôi đã sử dụng tính năng Kiểm tra phần tử trong Safari và khi tôi đánh dấu phần tử cơ thể, nó không lấp đầy toàn bộ cửa sổ.
alt text http://img534.imageshack.us/img534/9955/screenshot20100201at215.png

HTML:

<body> 

    <div id="gradient"></div> 
    <div id="holes"></div> 

    <div id="header">Header Text</div> 
</body>

CSS:

html, body { 
    height:100%; 

    margin:0; 
    padding:0; 
} 

body { 
    background-image:url(../Images/Tile.png); 
    background-color:#7D7D7D; 
    background-repeat:repeat; 
} 

#gradient { 
    background-image:url(../Images/Background.png); 
    background-repeat:repeat-x; 

    position:absolute; 
    top:0px; 
    left:0px; 
    height:100%; 
    right:0px; 
} 

#holes { 
    background-image:url(../Images/Holes.png); 
    background-repeat:repeat; 

    position:absolute; 
    top:2px; 
    left:2px; 
    height:100%; 
    right:0px; 
} 

#header { 
    background-image:url(../Images/Header.png); 
    background-repeat:repeat-x; 

    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 

    padding-top:24px; 
    height:49px; /* 73 - padding */ 

    color:rgb(113, 120, 128); 
    font-family:Helvetica, Arial; 
    font-weight:bold; 
    font-size:24px; 
    text-align:center; 
    text-shadow:#FFF 0px 1px 0px; 
}

Nguồn

2010-02-01 woody993

+0

Bạn có thể sử dụng javascript/jquery cho việc này? nếu có, đó là cách hợp lý để đạt được chức năng này. –

+0

Không có gì ngăn cản tôi, ngoại trừ sự không thích của tôi cho nó – woody993

+0

Tại sao không chỉ thiết lập chiều cao của họ cho một cái gì đó tục tĩu sau đó? Nếu họ dính vào đầu trang anyway thì nó không phải là một vấn đề! –

Trả lời

3

Cũng có vẻ với tôi rằng yếu tố của bạn với tất cả các nội dung được lưu hành. Nếu nó là sau đó nó sẽ không mở rộng cơ thể, trừ khi nó được xóa.

Nguồn

2010-02-01 14:57:18 prodigitalson

+0

Tôi nghĩ rằng anh ấy có thể có nó, hoàn toàn bỏ lỡ rằng khi css cho hộp nội dung không được đăng! – ghoppe

-1

Nếu tôi nhớ không lầm, để có thể xác định vị trí của hộp đựng trẻ em (A) của một container (B1, B2, ...), vị trí của nó phải tuyệt đối. Vị trí của vùng chứa body của bạn không.

Tôi đoán bạn nên thêm thuộc tính position:absolute; vào bộ chọn html,body.

Nguồn

2010-02-01 14:07:31 xtofl

+0

Đã thử, vẫn không thành công – woody993

1

Cách tốt nhất là sử dụng javascript. min-height không được hỗ trợ bởi mọi trình duyệt.

javascript sử dụng nguyên mẫu:

<script type="text/javascript"> 
var height = $(document.body).getHeight(); 
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>'); 
</script>

Nguồn

2010-02-01 14:22:08 sabansaulic

+0

Tôi không chắc chắn viết div vào trang trực tiếp là ý tưởng tốt nhất: tại sao không sử dụng $ ('# divName) .css (' height ', height) thay thế [hoặc nguyên mẫu tương đương]? –

+0

Không cần sử dụng javascript. Nếu bạn phải có khả năng tương thích với IE6 (blech!) Vì IE <6 xử lý chiều cao không chính xác như min-height, tốt hơn là sử dụng sao html hack: * html #gradient { chiều cao: 100%; } – ghoppe

+0

Số lượng khách truy cập ít nhất sẽ sử dụng cửa sổ, nếu có. – woody993

3

[cập nhật]
cách tiếp cận mới
này nên làm điều đó ..

sử dụng display:table trên 2 yếu tố bạn nên làm điều đó (nó hoạt động trong các thử nghiệm của tôi). (Nhưng bạn wil phải gán giá trị chiều rộng bây giờ ..

Tuy nhiên tôi không chắc chắn nếu bạn cần xác định các yếu tố lồng nhau như table-cell vv .. mà sẽ trở thành không thể quản lý ..

Có một thử mặc dù ..

cũ phiên bản không làm việc
bạn đã thử trên #gradient và #holes sau đây? 

#gradient { 
    height:auto!important; 
    height:100%; 
    min-height:100%; 
    .. 
    .. 
} 
#holes{ 
    height:auto!important; 
    height:100%; 
    min-height:100%; 
    .. 
    .. 
}

Nguồn

2010-02-01 14:32:30

+0

Tôi hiện có, vẫn không có gì – woody993

+0

có .. tôi đã đăng mà không kiểm tra .. nó sẽ chỉ hoạt động đối với phần tử tràn .. (một nội dung có nội dung sẽ vượt ra ngoài phần dưới cùng của chế độ xem ..) –

+0

đăng một cách tiếp cận khác .. có một cái nhìn .. –

0

Tôi nghĩ bạn đã làm đúng. Điều này cũng hoạt động trong Chrome (WebKit!) Và trong IE7/8/Quirks bất cứ khi nào bạn đặt chiều rộng: 100% trên #gradient và #holes, không thể kiểm tra safari trên máy Mac ngay bây giờ (chỉ có ở nhà) nhưng theo lý thuyết bạn sẽ thấy nó đúng cách.

Điều đó nói rằng, có thể đây là một điều doctype, hãy thử những điều khác nhau?

Nguồn

2010-02-01 14:39:57

+0

Đã thử XHTML 1.1, 1.0 Chuyển tiếp, 4.01 Chuyển tiếp – woody993

0

Thành thật mà nói, tôi nghĩ rằng tôi chỉ cần đi để overflow:auto nội dung của tôi do đó toàn bộ trang không cần phải được cuộn

Nguồn

2010-02-01 14:55:21 woody993

1

Bạn đã thử thiết lập như thế này chưa?

#holes { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

sẽ căng nguyên tố này để lấp đầy toàn bộ diện tích trang

Nguồn

2010-02-01 15:49:04

2 
$('div.class').css({'height':(($(document).height()))+'px'});

Nguồn

2010-11-05 05:33:26 beacks

36

Lưu ý rằng chiều cao tài sản quy định tại tỷ lệ là calculated with the respect to the containing block đồi khế, đồi không cần thiết phải là ngay lập tức tổ tiên - "The containing block for a positioned box is established by the nearest positioned ancestor or, if none exists, the initial containing block". Tôi đặt cược đây là những gì đang xảy ra trong trường hợp của người hỏi vì không có tổ tiên có vị trí nào (người có số position: đặt thành relative hoặc absolute).

Vì vậy, "khối chứa" phân giải thành initial containing block tương ứng với kích thước của chế độ xem (cửa sổ). Đặt position:relative thành body sẽ chiếm chiều cao của body và kéo dài nội dung hoàn toàn được định vị dọc theo body hoàn toàn.

More on containing block here.

Nguồn

2011-10-07 13:48:15 Adam

+3

Tru dat. OP nên chấp nhận câu trả lời này. –

+0

Đây là những gì tôi đang tìm kiếm, cảm ơn bạn! –

16

Tôi gặp sự cố tương tự. Sửa lỗi bằng cách thay đổi vị trí: tuyệt đối thành vị trí: cố định.

Nguồn

2012-12-14 17:28:37

+0

Phát triển một trình đơn dành cho thiết bị di động và điều này làm việc cho tôi tốt hơn các câu trả lời trước đó. – Sethen

+0

Dude! Đã tìm kiếm cách giải quyết vấn đề này cả ngày! Đây chính là nó! Cảm ơn rất nhiều! – acdcjunior

+0

Đây phải là câu trả lời được chấp nhận, hoạt động như một nét duyên dáng – ianstarz

0

Áp dụng kiểu CSS cho cả hai #gradient & #holes & đặt tập lệnh sau DIV của bạn.

.background-overlay{ 
    position: absolute; 
    left: 0; 
    right: 0; 
    z-index: -1; 
} 

<body> 
    <div id="gradient"></div> 
    <div id="holes"></div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      var bodyHeight = $("body").height(); 
      $('#gradient,#holes').height(bodyHeight); 

     }) 
    </script> 


    <div id="header">Header Text</div>

Nguồn

2015-03-23 10:00:18

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

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