cài đặt chiều cao 100% không hoạt động

Question

Vì một số lý do, ranh giới của vùng chứa sẽ không đi hết mức xuống dưới dù đã đạt được chiều cao 100%. Đây là mã của tôi, vùng chứa nằm dưới một trung tâm div khác.

Html

<div id="center"> 
<div class="container" > 
</div> 
</div> 

css

#center { 
    float:left; 
    width:20%; 
    margin-top:10px; 
    height:100%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
} 

Answer 1

Bạn sẽ phải bao gồm một cái gì đó như thế này trong CSS của bạn ...

body, html{ 
    height: 98%; 
    padding: 0; 
} 

Chơi xung quanh với chiều cao để loại bỏ các cuộn thanh dọc do lợi nhuận và biên giới trên các yếu tố chứa đựng bên trong.

http://jsfiddle.net/4JgA4/1/

EDIT:

Nếu không, làm cho nó 100% và giảm chiều cao của phần tử chính bên trong để loại bỏ dọc cuộn quán bar.

body, html { 
height: 100%; 
padding: 0; 
} 

#center { 
float:left; 
width:20%; 
margin-top:10px; 
height:90%; 
} 

.container { 
    margin-top:3px; 
    height:100%; 
    border:2px solid #dedede; 
    width:600px; 
} 

http://jsfiddle.net/4JgA4/3/

Answer 2

của bạn = id 'trung tâm' div cần phải được bên trong một cái gì đó với chiều cao.

Điều này giúp tôi - bất cứ khi nào tôi đặt kiểu theo chiều rộng hoặc chiều cao = 100%, tôi tự hỏi, "100% WHAT?" nhắc tôi đảm bảo bất kỳ phần tử nào bên trong cũng được tạo kiểu theo đúng chiều rộng và chiều cao.

Ngoài ra, đặt các đường viền màu khác nhau xung quanh mọi thứ để xem vị trí và độ lớn thực sự của chúng. Nó có thể làm tăng kích thước nhưng nó cho bạn một ý tưởng tốt về những gì đang thực sự xảy ra.

Answer 3

Đối với thuộc tính chiều cao 100% hoạt động, bạn cần đặt độ cao của div mẹ.

Trong trường hợp của bạn, phần tử là phụ huynh của #center nên có một số chiều cao để css của bạn hoạt động như mong đợi.

Answer 4

Thông thường, div chỉ cao bằng nội dung của nó bất kể chiều cao bạn chỉ định. Bạn cần phải lồng ghép chúng. Để tránh sự phức tạp, tôi đặt chiều cao tối đa và sử dụng vị trí tuyệt đối cho các phần tử tôi muốn ở cuối vùng chứa.

Là phương pháp thiết kế, bạn cần đảm bảo nội dung của div là chiều cao bạn muốn. Đệm có thể là một công cụ rất hữu ích. Bạn có thể đặt đệm vô lý vào và ẩn tràn. Sau đó, nó sẽ cap off tại max-chiều cao của bạn.