Hướng dẫn css div height 100% of parent - css div chiều cao 100% của cha mẹ

Tôi có một trang web có cấu trúc sau:

<div id="header"></div> <div id="main"> <div id="navigation"></div> <div id="content"></div> </div> <div id="footer"></div>

Điều hướng nằm ở bên trái và Div nội dung ở bên phải. Thông tin cho Div nội dung được kéo qua PHP, vì vậy nó khác nhau mọi lúc.

Làm thế nào tôi có thể mở rộng quy mô điều hướng theo chiều dọc để chiều cao của nó giống với chiều cao của Nội dung Div, bất kể trang nào được tải?

Tylerh

21.3K60 Huy hiệu vàng74 Huy hiệu bạc93 Huy hiệu đồng60 gold badges74 silver badges93 bronze badges

hỏi ngày 13 tháng 7 năm 2009 lúc 22:14Jul 13, 2009 at 22:14

2

Cho cha mẹ:

display: flex;

Bạn nên thêm một số tiền tố, //css-tricks.com/using-flexbox/.

Như @Adam Garner đã lưu ý, các mục Align: Stretch; không cần thiết. Việc sử dụng của nó cũng dành cho cha mẹ, không phải con cái. Nếu bạn muốn xác định trẻ em kéo dài, bạn sử dụng bản thân.

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }<div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>

Flimzy

70.8K15 Huy hiệu vàng132 Huy hiệu bạc171 Huy hiệu đồng15 gold badges132 silver badges171 bronze badges

Đã trả lời ngày 25 tháng 4 năm 2014 lúc 18:33Apr 25, 2014 at 18:33

AIPHEEAIPHEEAiphee

8,5603 Huy hiệu vàng16 Huy hiệu bạc16 Huy hiệu đồng3 gold badges16 silver badges16 bronze badges

8

Lưu ý: Câu trả lời này được áp dụng cho các trình duyệt Legacy mà không cần hỗ trợ cho tiêu chuẩn Flexbox. Để biết cách tiếp cận hiện đại, xem: //stackoverflow.com/a/23300532/1155721: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: //stackoverflow.com/a/23300532/1155721

Tôi khuyên bạn nên xem các cột chiều cao bằng nhau với CSS Trình duyệt chéo và không có bản hack.

Về cơ bản, làm điều này với CSS theo cách tương thích của trình duyệt không phải là tầm thường (nhưng tầm thường với các bảng) vì vậy hãy tìm cho mình một giải pháp đóng gói sẵn phù hợp.

Ngoài ra, câu trả lời khác nhau về việc bạn muốn chiều cao 100% hay chiều cao bằng nhau. Thông thường nó có chiều cao bằng nhau. Nếu nó chiều cao 100%, câu trả lời hơi khác nhau.

CSVAN

8,51210 Huy hiệu vàng46 Huy hiệu bạc87 Huy hiệu đồng10 gold badges46 silver badges87 bronze badges

Đã trả lời ngày 13 tháng 7 năm 2009 lúc 22:21Jul 13, 2009 at 22:21

cletuscletuscletus

606K163 Huy hiệu vàng903 Huy hiệu bạc940 Huy hiệu Đồng163 gold badges903 silver badges940 bronze badges

2

Đây là một vấn đề bực bội liên quan đến các nhà thiết kế mọi lúc. Bí quyết là bạn cần đặt chiều cao thành 100% trên cơ thể và HTML trong CSS của bạn.

html,body { height:100%; }

Mã dường như vô nghĩa này là xác định cho trình duyệt có nghĩa là 100%. Thất vọng, có, nhưng là cách đơn giản nhất.

Đã trả lời ngày 13 tháng 7 năm 2009 lúc 22:22Jul 13, 2009 at 22:22

TravistravisTravis

1.7621 Huy hiệu vàng14 Huy hiệu bạc12 Huy hiệu đồng1 gold badge14 silver badges12 bronze badges

6

Tôi thấy rằng việc đặt hai cột thành <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>2 thay vì <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>3 hoạt động tốt.

John

Huy hiệu vàng 12K1190 Huy hiệu bạc157 Huy hiệu đồng11 gold badges90 silver badges157 bronze badges

Đã trả lời ngày 5 tháng 5 năm 2011 lúc 21:59May 5, 2011 at 21:59

Paul Harveypaul HarveyPaul Harvey

1.0131 Huy hiệu vàng7 Huy hiệu bạc2 Huy hiệu đồng1 gold badge7 silver badges2 bronze badges

6

Nếu bạn không bận tâm đến div điều hướng bị cắt trong trường hợp div nội dung bất ngờ, có ít nhất một cách dễ dàng:

#main { position: relative; } #main #navigation { position: absolute; top: 0; left: 0; bottom: 0; width: 10em; /* or whatever */ } #main #content { margin: 0; margin-left: 10em; /* or whatever width you set for #navigation */ }

Theo trường hợp khác, có kỹ thuật Cột giả.

Đã trả lời ngày 13 tháng 7 năm 2009 lúc 22:22Jul 13, 2009 at 22:22

TravistravisDavid Thomas

1.7621 Huy hiệu vàng14 Huy hiệu bạc12 Huy hiệu đồng51 gold badges369 silver badges403 bronze badges

3

#main { overflow: hidden; } #navigation, #content { margin-bottom: -1000px; padding-bottom: 1000px; }

Tôi thấy rằng việc đặt hai cột thành <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>2 thay vì <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>3 hoạt động tốt.Aug 6, 2014 at 15:23

2

John

$(function() { function unifyHeights() { var maxHeight = 0; $('#container').children('#navigation, #content').each(function() { var height = $(this).outerHeight(); // alert(height); if ( height > maxHeight ) { maxHeight = height; } }); $('#navigation, #content').css('height', maxHeight); } unifyHeights(); });

Huy hiệu vàng 12K1190 Huy hiệu bạc157 Huy hiệu đồngJul 12, 2011 at 2:54

Đã trả lời ngày 5 tháng 5 năm 2011 lúc 21:59flavius

Paul Harveypaul Harvey2 silver badges2 bronze badges

3

#main { display: table; } #navigation, #content { display: table-cell; }

1.0131 Huy hiệu vàng7 Huy hiệu bạc2 Huy hiệu đồng

Nếu bạn không bận tâm đến div điều hướng bị cắt trong trường hợp div nội dung bất ngờ, có ít nhất một cách dễ dàng:

Theo trường hợp khác, có kỹ thuật Cột giả.9 gold badges58 silver badges62 bronze badges

David Thomasdavid ThomasMay 28, 2015 at 21:12

244K51 Huy hiệu vàng369 Huy hiệu bạc403 Huy hiệu đồngSergiu

Đã trả lời ngày 6 tháng 8 năm 2014 lúc 15:238 silver badges9 bronze badges

2

Sử dụng jQuery:

Đã trả lời ngày 12 tháng 7 năm 2011 lúc 2:54

FlaviusflaviusJun 4, 2013 at 14:40

2152 Huy hiệu bạc2 Huy hiệu đồngLajos Mészáros

Nhìn vào ví dụ này.2 gold badges19 silver badges25 bronze badges

Aurelio

margin-bottom: 100%;

23.6K9 Huy hiệu vàng58 Huy hiệu bạc62 Huy hiệu ĐồngDec 29, 2013 at 15:59

Đã trả lời ngày 28 tháng 5 năm 2015 lúc 21:12Tony C

Sergiusergiu1 silver badge2 bronze badges

2

1.1818 huy hiệu bạc9 Huy hiệu đồng

display: flex; 0

<div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>4 sẽ chỉ hoạt động, nếu bạn có tất cả các nút cha với chiều cao phần trăm được chỉ định với chiều cao cố định tính bằng pixel, EMS, v.v. ở cấp cao nhất. Bằng cách đó, chiều cao sẽ xếp tầng thành phần tử của bạn.

Bạn có thể chỉ định 100% cho HTML và các yếu tố cơ thể như @Travis đã nêu trước đó để có dòng chiều cao trang xuống các nút của bạn.

display: flex; 1

Đã trả lời ngày 4 tháng 6 năm 2013 lúc 14:40

Lajos Mészároslajos MészárosNov 24, 2016 at 11:16

3.6202 Huy hiệu vàng19 Huy hiệu bạc25 Huy hiệu ĐồngHakan Fıstık

Hãy thử làm biên độ dưới 100%.11 gold badges100 silver badges122 bronze badges

1

Đã trả lời ngày 29 tháng 12 năm 2013 lúc 15:59

Tony Ctony cMar 6, 2018 at 17:30

Huy hiệu đồng 1471 Bạc2 Huy hiệu đồngDziamid

Sau khi tìm kiếm và thử dài, không có gì giải quyết được vấn đề của tôi ngoại trừ12 gold badges68 silver badges103 bronze badges

0

trên con trai div

và cho cha mẹ áp dụng điều này

display: flex; 2

Ngoài ra, tôi đang sử dụng bootstrap và điều này không làm hỏng sự phản hồi đối với tôi.

Đã trả lời ngày 24 tháng 11 năm 2016 lúc 11:16Aug 25, 2021 at 5:08

Hakan fıstıkhakan fıstıkVimNing

15.3k11 Huy hiệu vàng100 Huy hiệu bạc122 Huy hiệu đồng4 gold badges26 silver badges50 bronze badges

Thêm <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>5 vào cha mẹ

Html:

display: flex; 3

Less:

display: flex; 4

Đã trả lời ngày 6 tháng 3 năm 2018 lúc 17:30Sep 20, 2012 at 20:59

DziamiddziamidDmitry Efimenko

10,8K12 Huy hiệu vàng68 Huy hiệu bạc103 Huy hiệu Đồng7 gold badges64 silver badges77 bronze badges

Cho năm 2021 độc giả:

Thử cái này:

display: flex; 5

Đây là những gì tôi đang làm:

display: flex; 6

Đã trả lời ngày 25 tháng 8 năm 2021 lúc 5:08

VimningvimningOct 29, 2014 at 11:57

1.5364 Huy hiệu vàng26 Huy hiệu bạc 50 Huy hiệu ĐồngPaula Fleck

Dựa trên phương pháp được mô tả trong bài viết này tôi đã tạo ra giải pháp động. Không có:11 silver badges21 bronze badges

1

Đã trả lời ngày 20 tháng 9 năm 2012 lúc 20:59

display: flex; 7

Sunil Garg

Huy hiệu vàng 13,5K2424 gold badges117 silver badges168 bronze badges

Đã trả lời ngày 19 tháng 1 năm 2017 lúc 20:06Jan 19, 2017 at 20:06

Bạn sử dụng css flexbox

display: flex; 8display: flex; 9

Đã trả lời ngày 7 tháng 7 năm 2018 lúc 23:23Jul 7, 2018 at 23:23

IniiniIni

4286 Huy hiệu bạc17 Huy hiệu đồng6 silver badges17 bronze badges

0

Tôi có thể hơi muộn với điều này nhưng tôi đã tìm thấy một công việc xung quanh có thể là một chút hack. Đầu tiên để cung cấp cho cha mẹ một flex và chiều cao 100Vh

Một cái gì đó như thế này:

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }0

Đã trả lời ngày 20 tháng 11 năm 2021 lúc 3:45Nov 20, 2021 at 3:45

ThemyththemyththeMyth

2244 Huy hiệu bạc11 Huy hiệu đồng4 silver badges11 bronze badges

Có một chút mâu thuẫn trong tiêu đề của câu hỏi và nội dung. Tiêu đề nói về một div cha mẹ, nhưng câu hỏi khiến nó có vẻ như bạn muốn hai div anh chị em (điều hướng và nội dung) có cùng chiều cao.

Bạn có (a) muốn cả điều hướng và nội dung là 100% chiều cao của chính, hoặc (b) muốn điều hướng và nội dung có cùng chiều cao không?

Tôi sẽ giả sử (b) ... nếu đó là như vậy, tôi không nghĩ rằng bạn sẽ có thể làm nó với cấu trúc trang hiện tại của bạn (ít nhất, không phải với CSS thuần túy và không có kịch bản). Bạn có thể sẽ cần phải làm một cái gì đó như:

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }1

và đặt Div nội dung có biên độ bên trái của bất kỳ chiều rộng nào của khung điều hướng. Bằng cách đó, nội dung của nội dung nằm ở bên phải của điều hướng và bạn có thể đặt Div điều hướng là 100% chiều cao của nội dung.

EDIT: Tôi đang thực hiện điều này hoàn toàn trong đầu, nhưng có lẽ bạn cũng cần phải đặt biên độ bên trái của DIV điều hướng thành một giá trị âm hoặc đặt nó tuyệt đối trái thành 0 để đẩy nó trở lại bên trái. Vấn đề là, có nhiều cách để thực hiện điều này nhưng không phải tất cả chúng sẽ tương thích với tất cả các trình duyệt.

Đã trả lời ngày 13 tháng 7 năm 2009 lúc 22:26Jul 13, 2009 at 22:26

Paul Abbottpaul AbbottPaul Abbott

7.0453 Huy hiệu vàng28 Huy hiệu bạc44 Huy hiệu đồng3 gold badges28 silver badges44 bronze badges

[Tham khảo mã ít hơn của DMity trong một câu trả lời khác] Tôi đoán rằng đây là một loại "mã giả"?

Từ những gì tôi hiểu, hãy thử sử dụng kỹ thuật Faux cột nên thực hiện thủ thuật.

//www.alistapart.com/articles/fauxcolumns/

Hi vọng điêu nay co ich :)

Đã trả lời ngày 13 tháng 7 năm 2009 lúc 22:21Jul 13, 2009 at 22:21

Jlunajlunajluna

2991 Huy hiệu vàng3 Huy hiệu bạc9 Huy hiệu đồng1 gold badge3 silver badges9 bronze badges

1

Đưa <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>6 cho đứa trẻ làm việc trong trường hợp của tôi

Đã trả lời ngày 27 tháng 3 năm 2018 lúc 0:14Mar 27, 2018 at 0:14

NeodevNeodevneoDev

2.7593 huy hiệu vàng30 huy hiệu bạc64 Huy hiệu đồng3 gold badges30 silver badges64 bronze badges

Câu trả lời này không lý tưởng nữa vì CSS Flexbox và Grid nơi được triển khai cho CSS. Tuy nhiên nó vẫn là một giải pháp làm việc

Trên một màn hình nhỏ hơn, có lẽ bạn sẽ muốn giữ tự động chiều cao khi col1, col2 và col3 được xếp chồng lên nhau.

Tuy nhiên, sau một điểm dừng truy vấn phương tiện, bạn muốn cols xuất hiện cạnh nhau với chiều cao bằng nhau cho tất cả các cột.

1125 PX chỉ là một ví dụ về điểm dừng chiều rộng cửa sổ sau đó bạn muốn thực hiện tất cả các cột được đặt ở cùng một chiều cao.

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }2

Tất nhiên, bạn có thể đặt nhiều điểm dừng hơn nếu bạn cần.

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }3

Đã trả lời ngày 12 tháng 3 năm 2016 lúc 15:56Mar 12, 2016 at 15:56

DevwldevwlDevWL

15.8k6 Huy hiệu vàng86 Huy hiệu bạc82 Huy hiệu Đồng6 gold badges86 silver badges82 bronze badges

Tôi đã có cùng một vấn đề, nó hoạt động dựa trên câu trả lời của Hakam Fostok, tôi đã tạo ra một ví dụ nhỏ, trong một số trường hợp nó có thể hoạt động mà không phải thêm <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>7 và <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>8 trên thùng chứa cha mẹ

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }4

JSfiddle

Đã trả lời ngày 14 tháng 8 năm 2019 lúc 14:37Aug 14, 2019 at 14:37

BiilobuiloBuilo

Phù hiệu bằng đồng 3144 bronze badges

Như được hiển thị trước đó, Flexbox là dễ nhất. ví dụ.

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }5

Điều này sẽ sắp xếp tất cả các yếu tố con với trung tâm trong phần tử cha.

Đã trả lời ngày 11 tháng 11 năm 2015 lúc 17:13Nov 11, 2015 at 17:13

Chandan Purohitchandan PurohitChandan Purohit

2.2031 Huy hiệu vàng16 Huy hiệu bạc15 Huy hiệu đồng1 gold badge16 silver badges15 bronze badges

1

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }6

From:

//getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

Trạng thái bootstrap nhưng bạn không cần bootstrap để sử dụng điều này. Trả lời câu hỏi cũ này, vì điều này làm việc cho tôi, và có vẻ khá dễ thực hiện.

Đây là câu trả lời tương tự tôi cung cấp cho câu hỏi này

Đã trả lời ngày 10 tháng 10 năm 2017 lúc 23:09Oct 10, 2017 at 23:09

eaglei22eaglei22eaglei22

2.4601 Huy hiệu vàng36 Huy hiệu bạc 50 Huy hiệu Đồng1 gold badge36 silver badges50 bronze badges

Thủ thuật này không hoạt động: Thêm một yếu tố cuối cùng trong phần HTML của bạn với một kiểu rõ ràng: cả hai;

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }7

Tất cả mọi thứ trước đó sẽ được bao gồm trong chiều cao.

Đã trả lời ngày 21 tháng 2 năm 2018 lúc 11:35Feb 21, 2018 at 11:35

Paul Vpaul vPaul V

3453 Huy hiệu bạc9 Huy hiệu Đồng3 silver badges9 bronze badges

0

Những gì làm việc cho tôi là thêm <div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>9 cho tất cả các bậc cha mẹ của đứa trẻ và sau đó html,body { height:100%; } 0 cho chính đứa trẻ.

Đã trả lời ngày 23 tháng 6 năm 2021 lúc 21:13Jun 23, 2021 at 21:13

Akaisteph7Akaisteph7Akaisteph7

4.4362 Huy hiệu vàng14 Huy hiệu bạc39 Huy hiệu Đồng2 gold badges14 silver badges39 bronze badges

Mã sau đây cho khả năng thiết lập chiều cao tối thiểu cho html,body { height:100%; } 1 và cũng làm cho nó có chiều cao 100% của cha mẹ chỉ bằng cách sử dụng Flex.

CSS:

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }8

HTML:

.parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; }9

Đã trả lời ngày 2 tháng 8 lúc 5:46Aug 2 at 5:46

Anh ta hahhim hahHim Hah

1.25512 huy hiệu bạc8 Huy hiệu đồng12 silver badges8 bronze badges

Mã này hoạt động hoàn hảo cho tôi

<div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>0

Đã trả lời ngày 2 tháng 9 lúc 19:11Sep 2 at 19:11

Bạn có thể đặt html,body { height:100%; } 2 lên html,body { height:100%; } 3, html,body { height:100%; } 4 đến html,body { height:100%; } 5.

<div class="parent"> <div class="other-child"> Only used for stretching the parent </div> <div class="child"></div> </div>1

Đã trả lời ngày 28 tháng 9 lúc 19:16Sep 28 at 19:16

ClusterHclusterhClusterH

3252 Huy hiệu bạc12 Huy hiệu đồng2 silver badges12 bronze badges

2

Làm thế nào để bạn tạo ra một chiều cao đầy đủ của cha mẹ?

Làm thế nào để bạn làm cho trẻ em flexbox chiều cao 100% của cha mẹ bằng cách sử dụng CSS?

Làm cách nào để làm cho div của tôi có chiều cao 100% của cha mẹ div?

Làm thế nào để bạn thừa hưởng chiều cao của cha mẹ trong CSS?