chiều cao tối thiểu: 100%; chiều cao: 100%; không làm việc

Tôi không thể tìm ra điều gì sai với phong cách của mình.
Hy vọng ai đó có thể giúp tôi với điều này.
Mã dụ:chiều cao tối thiểu: 100%; chiều cao: 100%; không làm việc

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

Cách nó phải là như trong Opera Browser (xem hình): Sample image

Nguồn

2012-01-09 wzazza

Bạn có một DOCTYPE? –

@MrLister: Nếu không, anh ta có thể tham khảo: http://www.w3schools.com/tags/tag_doctype.asp –

vâng tôi có loại tài liệu: – wzazza

Các Làm thế nào

http://jsfiddle.net/L9GEa/

The Why

Một trực giác có thể giả định (như tôi đã từng làm) rằng phần tử html đã có một chiều cao quyết tâm, nhưng nó không (ít nhất là trong bối cảnh này). May mắn (hoặc theo thiết kế) một phần tử này có thuộc tính duy nhất của chiều cao của nó được xác định khi nó được gán một chiều cao phần trăm. Đó là khái niệm thiết yếu bởi vì để tính toán (xác định) chiều cao của bất kỳ phần tử nào khác được gán chiều cao phần trăm, bạn cũng phải có khả năng xác định chiều cao của nó.
Bất kỳ ai đã làm việc với CSS và DOM đủ khả năng sẽ cho bạn biết họ ghét nổi. Điều này là bởi vì nó kéo các phần tử ra khỏi dòng chảy, đòi hỏi công việc bổ sung và suy nghĩ để sắp xếp các hiệu ứng. Thay vào đó, hãy sử dụng display: inline-block; vertical-align: top; với một báo trước rằng bạn sẽ phải thêm nhận xét html xung quanh bất kỳ khoảng trắng nào giữa các phần tử đó.

CSS

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px;min-height:250px; 
    /*changes*/ 
    height:100%; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
    /*changes*/ 
    float:none; 
    display:inline-block; 
    vertical-align:top; 
} 
/*changes*/ 
html, 
body{ 
    height:100%; 
}

HTML

<div class="maindiv"> 
    <div class="left_inner">Left Block content</div><!-- 
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

Nguồn

2013-09-14 05:40:02

Giải pháp này làm việc cho tôi, vì vậy tôi đánh dấu nó là câu trả lời tốt nhất. Cảm ơn bạn. – wzazza

Theo kinh nghiệm của tôi, hãy thả các nhận xét html và đặt kích thước phông chữ thành 0, trên các thùng chứa/yếu tố bên trong của bạn đặt kích thước phông chữ và hiển thị nội dung quảng cáo nội tuyến .. Inherrit kích thước phông chữ từ ví dụ cơ thể. 1rem – Ghost1

Hãy thử điều này:

<style type="text/css"> 
.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height: auto; min-height:250px; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; height: 100%; background:#00CC33; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
<div class="maindiv"> 
    <div class="left_inner">Left Block content</div> 
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div>

Hầu hết thời gian bạn phải áp dụng chiều cao tự động hoặc 100% cho DIV gốc.

Nguồn

2012-01-09 14:59:45

cũng hoạt động với chiều cao pixel cho div bên ngoài. – danijar

Điều này không hiệu quả. – wzazza

@sharethis: Bạn không thể đạt được một QUY TẮC CSS ở 100% nếu bạn áp dụng giá trị tại điểm ảnh cơ bản. –

thêm

html, 
body { 
    height:100% 
}

ở đầu css của bạn, làm việc cho tôi

EDIT: thử nghiệm của tôi:

<!DOCTYPE html> 
<html> 

<head> 
<style> 
html, 
body { 
height:100%; 
} 

.maindiv { 
    overflow:hidden; border:#000 1px solid; 
    width:450px; height:100%; 
position:relative; 
} 
.left_inner { 
    float:left; width:200px; 
    min-height:100%; background:#00CC33; 
position:relative; 
} 
.right_inner { 
    float:left; width:150px; background:#C93; 
} 
</style> 
</head> 
<body> 
<div class="maindiv"> 
<div class="left_inner">Left Block content</div> 
<div class="right_inner">Right block content<br />sample txt<br />sample txt</div> 
</div> 
</body> 
</html>

Nguồn

2012-04-04 03:09:29 Michel

chiều cao tối thiểu: 100%; chiều cao: 100%; không làm việc

Trả lời

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