2011-08-23 35 views
34

Tôi có một trang trong đó mở rộng nội dung chảy ra khỏi div đang nắm giữ, CSS có liên quan cũng dưới đây. Chỉ cần xóa chiều cao: dòng 510px sẽ cho phép div mở rộng khi cần. Tuy nhiên, những người dùng mới không có nội dung sẽ không có bất kỳ chiều cao nào và trang sẽ không bị mờ. Làm cách nào để đặt chiều cao tối thiểu?Làm thế nào để thiết lập chiều cao tối thiểu cho một div?

.Bb1 
    { 
    width:680px; 
    height:510px; 
    background-color:#ffffff; 
    float:left; 
    border-right:3px solid #edefed; 
    border-radius: 10px; 
    } 

Trả lời

41

CSS cho phép một "min-height" bất động sản. Điều này có thể được sử dụng để thiết lập chiều cao tối thiểu của div bạn đang nói về.

#div-id { min-height: 100px; } 
4
min-height:510px; 

css có thuộc tính một min-height

21

Trong trường hợp bạn muốn thiết lập ở mức tối thiểu/chiều cao tối đa và tối thiểu/chiều rộng tối đa đến một div, CSS cho phép các tính năng cụ thể.

Để đặt chiều rộng tối thiểu là div hoặc bất kỳ lớp/id/phần tử nào khác, hãy sử dụng;

min-width: 150px; 

Để đặt chiều cao tối thiểu là div hoặc bất kỳ lớp/id/phần tử nào khác, sử dụng;

min-height: 300px; 

Tương tự để đặt chiều rộng và chiều cao tối đa của div hoặc bất kỳ lớp/id/phần tử nào khác, sử dụng;

max-width: 600px; 
max-height: 600px; 

Chú ý:

Đối với bạn div-mở rộng tự do về chiều cao và chiều rộng sau khi số liệu hiện có sẵn cho người sử dụng; bạn sẽ phải đặt chiều rộng/chiều cao thành autongay lập tức sau khi bạn đã đặt min-width hoặc min-height.

min-width: 300px; 
width: auto; 

min-height: 100px; 
height: auto; 
2
.comments { min-height:650px;height:auto; } 


<div class="comments">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi.</div> 
2

Đây là d cách thông qua đó bạn có thể thiết lập chiều cao tối thiểu của một div

<div id="bb1" style="min-height:200px;> 
    ..... 
</div> 

hoặc áp dụng

#bb1{ 
    min-height:200px; 
} 

nếu bạn đã sử dụng lớp

như

<div class="bb1"> 

trong div sau đó sử dụng

.bb1{ 
    min-height:200px; 
} 
Các vấn đề liên quan