Làm thế nào để làm cho chiều cao div 100% liên quan đến cha mẹ?

Tôi mắc kẹt với một cái gì đó như dưới đây. Tôi cần phải làm cho đỉnh cao 100% bên phải div (bgcolor của nó sẽ bao gồm chiều cao đầy đủ của div chính).Làm thế nào để làm cho chiều cao div 100% liên quan đến cha mẹ?

<body> 
    <div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;"> 
     <div id="left" style="float: left; width: 600px; background-color: #A7C864;"> 
      <div id="left-top">left-top</div> 
      <div id="left-bottom">left-bottom</div> 
     </div> 
     <div id="right" style="float: right; width: 200px; background-color: #C7E48E;"> 
      <div id="right-top">right-top</div> 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
</body>

dụ làm việc ở đây: http://marioosh.net/lay1.html

Sử dụng bảng nó rất dễ dàng: http://marioosh.net/lay2.html

Nguồn

2011-01-21 marioosh

Ngay cả khi thử điều này cũng gợi ý rằng bạn có thể không hiểu tất cả những gì về div. Nếu bạn muốn làm điều đó sử dụng bảng, không phải của div. Nếu bạn thiết lập chiều cao của div chính để chiều cao của div trái, sau đó bạn có thể đặt div quyền 100%, nhưng đó là loại ngớ ngẩn bởi vì bạn rõ ràng có thể gửi chiều cao bên phải của div. – Myforwik

Vì vậy, hãy cho tôi biết điều gì là của div? – marioosh

kiểm tra chúng. Tôi chắc chắn họ sẽ giúp đỡ. [question1] (http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-height) [question2] (http: //stackoverflow.com/questions/485827/css-100-height-with-padding-margin) – ayush

-2

Bạn cần phải thiết lập chiều cao của các yếu tố cha mẹ để cho phép độ cao 100%. Nếu bạn đặt cả chiều cao 100%, bạn sẽ nhận được hiệu ứng bạn đang tìm kiếm

Nguồn

2011-01-21 08:51:02

Tôi không cần div chính đó có chiều cao 100% – marioosh

Tôi có thể hiểu sai câu hỏi (liên kết đến ví dụ dựa trên bảng không hoạt động), nhưng có vẻ như bạn cố gắng tạo hai cột có chiều cao bằng nhau. Có một số kỹ thuật mà bạn có thể sử dụng, đây là ba trong số họ:

Bạn có thể cung cấp cho mỗi DIV một đệm đáy lớn, và một biên độ không kém phần lớn, nhưng tiêu cực, đáy.
```
#main { 
    overflow: hidden; 
} 
#left, #right { 
    float: left; 
    padding-bottom: 1000em; 
    margin-bottom: -1000em; 
} 
```
Giải pháp này không có vấn đề gì; nếu bạn cố gắng liên kết đến một phần tử trong một trong các cột (ví dụ: bạn có một phần tử ở một trong các cột có id=foo và bạn liên kết đến mypage.html#foo) thì bố cục sẽ bị hỏng. Cũng khó thêm đường viền dưới bằng kỹ thuật này.

Full ví dụ từ Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
Bạn có thể cung cấp cho một trong các cột biên phủ định phù hợp, và người kia là biên giới rất rộng trái.
```
#left, #right { 
    float: left; 
} 
#left { 
    background: red; 
    width: 200px; 
    margin-right: -200px; 
} 
#right { 
    border-left: 200px solid red; 
} 
```
Thông tin thêm về Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
Bạn có thể giả mạo nó bằng cách cho #main hình nền bao gồm các nền tảng cho cả hai cột. Kỹ thuật này được gọi là "Cột giả" và rất hữu ích khi bạn muốn hình nền phức tạp hoặc đường viền trang trí giữa các cột.

Thông tin thêm về A List Apart: http://www.alistapart.com/articles/fauxcolumns/

Là một commenter về vấn đề lưu ý, bạn cũng có thể sử dụng một bảng. Tuy nhiên, trừ khi bạn đang hiển thị dữ liệu dạng bảng TABLE không phải là phần tử HTML thích hợp.

Nguồn

2012-02-05 20:26:16 georgebrock

Vì vậy, tất cả các phần đệm/lề này với các div để mô phỏng kém thứ gì đó chúng tôi đã làm trong hơn 15 năm sử dụng các bảng là phần tử HTML "thích hợp"? Odd ... – bfritz

Làm thế nào để làm cho chiều cao div 100% liên quan đến cha mẹ?

Trả lời

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