html cơ thể là nhỏ hơn so với nội dung của nó

Dưới đây là một cơ bản illustration của vấn đề:html cơ thể là nhỏ hơn so với nội dung của nó

<html><head><style type="text/css"> 
    html {width: 100%; height: 100%; background: red;} 
    body {width: 100%; height: 100%; background: green;} 
     
    .leftbar, .rightbar {height: 100%; background: blue;} 

    .leftbar  {float: left;} 
    .rightbar {float: right;} 

    table {width: 100px; height: 800px; background: black; color: white; 
           margin: 0 auto 0 auto;} 
</style></head> 
<body> 
    <ul class="leftbar"><li>one</li><li>two</li></ul> 
    <ul class="rightbar"><li>alpha</li><li>beta</li></ul> 
    <table><tbody><tr><td>blah blah</td></tr></tbody></table> 
</body> 
</html>

Chúng ta có thể thấy ngay rằng nổi ul yếu tố này là cao như các body mà chứa họ, vấn đề là các body không cao bằng table chứa trong đó.

Làm cách nào để làm cho body đủ lớn? Trong ví dụ này, tôi muốn các số leftbar và rightbar giảm hết mức, cho đến khi cuộn cho phép, vì vậy bạn không bao giờ có thể thấy bất kỳ khoảng trống nào bên dưới chúng.

Nguồn

2012-02-22 spraff

-1

Sử dụng bảng. Chúng không tinh khiết nhưng chúng hoạt động.

Các giải pháp dựa trên div liên quan đến các thỏa hiệp không được chấp nhận (kích thước tuyệt đối, mất phao).

Nguồn

2012-02-24 17:09:06 spraff

_fsvo_ "work". Có thể thấy rằng chỉ vì họ làm việc cho trường hợp sử dụng cụ thể của bạn, họ _must_ làm việc cho tất cả các ngữ cảnh khác mà nội dung của bạn sẽ được truy cập. –

Chúng hoạt động trong bối cảnh cần thiết và các lựa chọn thay thế * không *. – spraff

Nó không phản ánh tốt trên cộng đồng của chúng tôi rằng chúng tôi bỏ phiếu bình chọn một câu trả lời hợp lệ có khả năng giải quyết vấn đề của OP, đơn giản vì nó hết thời trang. Các bảng rất khó duy trì, và phá vỡ dòng chảy bình thường, nhưng chúng là một giải pháp thông minh cho một số vấn đề về bố cục gai góc, đặc biệt là trong thế giới trước flexbox. (Như là 'display: table;' trên một phần tử mức khối bình thường.) – XML

Xóa height: 100% khỏi quy tắc body của bạn - điều này làm cho cơ thể cao bằng chiều cao khung nhìn (nhỏ hơn chiều cao nội dung).

Nguồn

2012-02-22 16:02:58

Điều đó làm cho nội dung 'cao hơn', nhưng' ul' vẫn chỉ là chiều cao của chế độ xem. – spraff

Làm cho tinh thần. Đối với 'ul' để lấp đầy 'body', nó cần phải có một số chiều cao xác định được thiết lập. Đặt nó thành '800px', giống như phần tử con cao nhất của nó. –

Điều này làm cho rất nhiều ý nghĩa và hoàn toàn cố định vấn đề này gây phiền nhiễu ngẫu nhiên tôi đã có trên một trang web như một năm trước đây. Tôi đã chuyển từ chiều cao: 100% thành chiều cao tối thiểu: 100% để tính toán các trang có thân ngắn hơn khung nhìn. Cảm ơn! – elainevdw

body{ height:100%; }

Điều này có vẻ là sự hiểu lầm về mã. Một "100%" chiều cao là tương đối so với một cái gì đó. Nói cách khác "100% những gì?"

Điều này được đặt là body = kích thước của cửa sổ. trong JSFiddle, đó là kích thước của hộp được hiển thị. Trên trình duyệt, nó sẽ là 100% của cửa sổ xem.

Vì vậy, nếu thu nhỏ cửa sổ trình duyệt của bạn xuống một không gian xem nhỏ, chiều cao 100% sẽ là 100% kích thước nhỏ. Đó là chính xác.

Nếu bạn có nội dung dài hơn thế, bạn sẽ gặp phải các vấn đề bạn thấy trong ví dụ của mình. Nhớ lại rằng bảng là một phần tử con, không phải là một vùng chứa cha. CSS thừa kế từ cha mẹ, không phải trẻ em. Vì vậy, bạn phải chắc chắn BODY vẫn còn năng động trong thiết lập chiều cao của nó.

cập nhật

Dưới đây là một JSFiddle cho min-height trên cơ thể; http://jsfiddle.net/uZCKn/1/ Cần chiều cao HTML để 100% hoạt động. OK từ đây: min-height does not work with body

Điều duy nhất tôi có thể nghĩ là JavaScript để đặt chiều cao của thanh bên hoặc sử dụng cột giả. Nhưng có thể có một cái gì đó khác đang xảy ra để có được thanh trái/phải để điền vào chiều cao container của nó cũng như tôi là mất tích.

Có một phần giải thích.

Nguồn

2012-02-22 16:14:01 jmbertucci

http://jsfiddle.net/6ZeLh/

Để khắc phục chiều cao cơ thể không đi tất cả các con đường xuống thay đổi body{height:100%} để min-height:100%. Nếu bạn quan tâm, điều này sẽ không hoạt động trong IE6. Để sửa danh sách của bạn, hãy lấy phao ra. Thêm position:relative đến body, thêm position:absolute để .leftbar, .rightbar và thiết lập các vị trí như sau

.leftbar {left:0; top:0;} 
.rightbar {right:0; top:0;}

Bạn có thể nhìn thấy nó trong fiddle tôi liên kết ở trên.

Nguồn

2012-02-22 16:21:32 hradac

Ah, đó là một sửa chữa tốt. Làm cho các thanh bên vị trí tuyệt đối. – jmbertucci

Nếu bạn sử dụng phao, bạn phải sử dụng clearfix. Ví dụ (overflow: hidden để div cha mẹ cung cấp cho bạn một đơn giản sửa chữa rõ ràng):

<div style="overflow: hidden;"> 
    <ul class="leftbar"> 
     <li>one</li> 
     <li>two</li> 
    </ul> 
    <ul class="rightbar"> 
     <li>alpha</li> 
     <li>beta</li> 
    </ul> 
</div>

Bạn có thể google hơn clearfixes, đặc biệt đối với trường hợp của bạn

Nguồn

2016-03-19 08:38:14 Indevelop

loại bỏ

html, body { height: 100%; }

và thêm

body { height: fit-content; }

Điều khác là chứng nhận rằng không có div của trẻ em đó là làm cho những điều nhỏ hơn sau đó nó thực sự cần được.

Nguồn

2017-11-07 14:27:53

'fit-content' là một thuộc tính thử nghiệm không nên được sử dụng trong mã sản xuất vào năm 2017. – TylerH

@TylerH bạn có thể đăng một số liên kết để biết thêm về vấn đề này? –

html cơ thể là nhỏ hơn so với nội dung của nó

Trả lời

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