Full chiều cao và đầy đủ chiều rộng bố trí CSS

Tôi đang tìm kiếm một cách để tạo ra một CSS-only (không Javascript) bố trí với 5 khu vực đó trông như thế này:Full chiều cao và đầy đủ chiều rộng bố trí CSS

┌────────────────────┐ 
    │   H   │ 
    ├────┬────────┬──────┤ 
    │ │  │  │ 
    │ │  │  │ 
    │ │  │  │ 
    │ A │ B │ C │ 
    │ │  │  │ 
    │ │  │  │ 
    │ │  │  │ 
    ├────┴────────┴──────┤ 
    │   F   │ 
    └────────────────────┘

(Sơ đồ trên sẽ hiển thị một cách chính xác chỉ khi phông chữ của bạn có các ký tự dòng hộp Unicode.)

Bố cục phải điền đầy đủ khoảng trống trong trình duyệt web (cả chiều cao và chiều rộng). A, B, C phải có cùng chiều cao; và H và F phải có cùng chiều rộng. Tức là, không có khoảng cách giữa các vùng, ngoại trừ một biên độ cố định. Các yếu tố bên trong khu vực nên biết kích thước của bố mẹ; có nghĩa là, nếu tôi đặt

<textarea style="width:100%;height:100%">Just a test</textarea>

bên trong một khu vực, nó sẽ mở rộng đến toàn bộ chiều rộng và chiều cao của khu vực. Sẽ không có thanh cuộn ở phía bên phải của cửa sổ trình duyệt (vì chiều cao của H, C và F chính xác tăng lên theo chiều cao của khu vực trình duyệt).

Điều này rất dễ thực hiện nếu bạn đang sử dụng <table> để thực hiện bố cục. Nhưng tôi tiếp tục đọc rằng việc sử dụng các bảng để định dạng là một điều xấu và CSS là con đường để đi.

Tôi biết rằng có các nhóm làm việc W3C hoạt động trên việc mở rộng tiêu chuẩn CSS bằng các tính năng giúp bố cục ở trên rất dễ thực hiện. Tuy nhiên, các tiện ích mở rộng tiêu chuẩn này hiện không được hầu hết các trình duyệt triển khai; và tôi cần một giải pháp hoạt động với các trình duyệt hiện tại.

Tôi đã tìm kiếm trên nhiều trang web có chứa bố cục CSS mẫu, nhưng không ai trong số họ có thể làm những gì tôi mô tả ở trên. Hầu hết các bố cục này không có chiều cao đầy đủ hoặc các cột có chiều cao khác nhau hoặc chúng yêu cầu JavaScript.

Vì vậy, câu hỏi của tôi là: có thể tạo bố cục ở trên không, chỉ sử dụng CSS (không có JavaScript, không có cột giả, không <table>)? Tất nhiên, giải pháp sẽ hoạt động với các trình duyệt web hiện tại.

EDIT: Dựa trên các giải pháp được cung cấp bởi Gilsham, tôi cố gắng viết một trang mẫu mà tạo ra cách bố trí mong muốn CSS-chỉ (thử nghiệm với Firefox 3.5.5 và IE8):

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html,body{ 
    height:100%;  
    margin:0; 
    padding:0; 
    border:0; 
} 

div{ 
    margin:0; 
    border:0; 
} 

textarea { 
    margin:0; 
    border:0; 
    padding:0; 
    height:100%; 
    width:100%; 
} 

.content{ 
    display:table; 
    width:100%; 
    border-collapse:separate; 
    height:80%; 
} 

.Col{ 
    display:table-cell; 
    width:30%; 
    height:100%; 
} 

#header,#footer{ 
    height:10%; 
    position:relative; 
    z-index:1; 
} 

</style> 
</head> 
<body> 
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div> 
<div class="content"> 
    <div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div> 
    <div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div> 
    <div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div> 
</div> 
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div> 
</body> 
</html>

Một nhược điểm là các div phải được xác định theo một thứ tự cụ thể mà là xấu cho tối ưu hóa công cụ tìm kiếm và cho người đọc màn hình; điều này, tuy nhiên, không quan trọng đối với ứng dụng web dự định.

/Frank

Nguồn

2010-09-06 Anonymous

Có một lý do tại sao bạn không thể tìm bất kỳ tài liệu nào về cách thực hiện điều này - Bởi vì không có mục đích thiết thực cho việc này! Chất lỏng cho * hoặc * chiều cao hoặc chiều rộng là hữu ích. Chất lỏng cho ** cả hai ** chỉ là ngớ ngẩn. Chắc chắn bạn đã thấy cuộc thảo luận về kích thước màn hình và hiệu ứng của chúng trên thiết kế và phát triển web. Ngay cả khi điều này là có thể về mặt kỹ thuật, việc tạo ra một thiết kế phù hợp với điều này sẽ không thể thực hiện được. Thật hấp dẫn để chỉ ra loại điều này là lý do tại sao chúng ta vẫn cần các bảng để bố trí, (và cách câu hỏi được đặt ra, có thể là) nhưng không - không phải với cái gì đó không thực tế. –

Bạn có thể tìm thấy loại bố cục này ở mọi nơi trong thế giới ứng dụng dành cho máy tính để bàn: chỉ cần nhìn vào Outlook, Visual Studio, Eclipse, v.v. Các ứng dụng web như Outlook Web Access cũng có bố cục này (với '

', tất nhiên). Vì vậy, tôi nghĩ rằng ** là ** một mục đích thực tế. –

@fmunkert Ứng dụng web sử dụng Javascript - Trên thực tế, không ai hoạt động trong các điều kiện bị hạn chế như vậy –

Trả lời

http://jsfiddle.net/aGG3V/

để thiết lập các header và footer chiều cao bạn phải thiết lập nó trong phong cách của họ và cũng là đệm .content và lợi nhuận (điều này phiên bản tiêu cực)

Nguồn

2010-09-06 23:25:02 Gilsham

Lý do bạn không thể tìm thấy bất kỳ CSS để làm điều này là bởi vì spec CSS không thực sự cho phép bạn để đáp ứng tất cả các điều kiện mà không sử dụng ít nhất một trong các tùy chọn mà bạn không' Tôi muốn sử dụng.

Chén Thánh bố trí chất lỏng là 100% CSS nhưng không đáp ứng được tiêu chí chiều cao của bạn ngày của riêng mình: http://www.alistapart.com/articles/holygrail/

Bạn có thể giả mạo các tiêu chuẩn chiều cao với chân bằng cách sử dụng phương pháp này: http://www.themaninblue.com/writing/perspective/2005/08/29/

này Bài viết 24Ways có phương pháp cột đầy đủ chiều cao bằng cách sử dụng định vị tuyệt đối, giải quyết một vài vấn đề của bạn nhưng tạo ra một số mới trong đó một trong các cột của bạn luôn tràn nếu nội dung mở rộng: http://24ways.org/2008/absolute-columns

Bạn có thể sẽ cần t o kết hợp một số phương pháp để có được một cái gì đó hoàn toàn khả thi với spec của bạn. Cá nhân tôi chỉ sử dụng jquery vì cuộc sống quá ngắn để làm rối tung xung quanh với CSS như thế này, nhưng nếu bạn đã chết để tránh nó, thì hãy chuẩn bị cho mình nhiều thứ xung quanh.

Nguồn

2010-09-06 15:36:25 hollsk

Không có cách dễ dàng để có được một yếu tố để điền vào một chiều sâu nhất định chính xác khi sử dụng số đo tỷ lệ phần trăm.

Bạn có thể nhận gần bằng anchoring the footer ở dưới cùng cửa sổ, sau đó - nếu cols A và C đều có màu nền nhưng nền của col B khác nhau, hãy đặt màu nền của cơ thể (hoặc div chứa nếu có) để khớp với cols A + C để liên tục lấp đầy những khoảng trống bên dưới của các cột nếu họ ngắn hơn col B.

Nguồn

2010-09-06 15:37:50

Hi fmunkert (và những người khác ở đây :),

tôi chỉ tò mò và suy nghĩ muốn thử nó ra, vì vậy tôi bắn lên notepad của tôi và đi lên với một cái gì đó như thế này:

<html> 
    <head></head> 
<body style="margin: 0px; padding: 0px; height: 100%; width: 100%; text-align: center;"> 
<div style="height: 100%; width: 100%;"> 

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">H</div> 

<div style="height:60%; width: 100%; display: table;"> 
<div style="float:left; height:100%; width: 20%; background-color: yellow;">A</div> 
<div style="float:left; height:100%; width: 60%; background-color: grey;">B</div> 
<div style="float:left; height:100%; width: 20%; background-color: yellow;">C</div> 
</div> 

<div style="height:20%; width: 100%; text-align: center; background-color: orange;">F</div> 

</div> 
</body> 
</html>

và đây là kết quả trong Firefox:

Firefox Screenshot

và đầu ra trong IE8:

IE8 screenshot

Tôi thử nghiệm này sử dụng Firefox 3 và IE8. Có vẻ ok với tôi. Đây có phải là điều bạn muốn không? :)

Lưu ý 1: Như đã đề cập bởi người khác, điều này có thể không thực tế, nhưng vẫn phụ thuộc vào những gì bạn/khách hàng của bạn muốn. Lưu ý 2: Nếu đây thực sự là những gì bạn muốn, bạn có thể chỉnh sửa giá trị chiều cao và chiều rộng theo nhu cầu của mình và bạn nên đặt các quy tắc CSS đó thành tệp CSS riêng biệt thay vì kiểu nội tuyến là phương pháp hay nhất.

Nguồn

2010-09-06 16:31:06 Gan

Nó hoạt động hoàn hảo trong Firefox 3.5.5, nhưng tôi không thể làm cho nó hoạt động trong Internet Explorer 8. Tôi đã thử vài DOCTYPE (không, html, lỏng lẻo và nghiêm ngặt), nhưng chiều cao quá nhỏ hoặc phần C bị thất lạc. –

Thật kỳ lạ. Tôi đã tải lên ảnh chụp màn hình IE8, và như bạn thấy, nó hoạt động giống như trong Firefox. Bạn có các tệp CSS khác có thể gây ra sự cố không? Hãy thử sử dụng công cụ phát triển IE (Phím tắt - F12) để tìm hiểu điều đó. – Gan

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