2009-02-15 29 views
9

Tôi có một trang HTML chia dọc thànhLàm nội dung HTML mở rộng để lấp đầy cửa sổ

  • Tiêu đề
  • Body
  • Footer

Cơ thể lần lượt được chia theo chiều ngang vào

  • Một DIV lớn ở bên trái được bao quanh bởi scro llbars, hiển thị một phần của một sơ đồ
  • Một hình thức bên phải

Các header và footer được cố định chiều cao. Cơ thể sẽ mở rộng theo chiều dọc để lấp đầy phần cửa sổ không bị chiếm bởi đầu trang và chân trang.

Tương tự, biểu mẫu có chiều rộng cố định và ngăn cuộn sẽ mở rộng theo chiều ngang để lấp đầy chiều rộng cửa sổ.

Biểu đồ rất lớn (tối đa 10x10 màn hình) nên tôi không thể hiển thị tất cả. Thay vào đó, tôi muốn hiển thị càng nhiều càng tốt (sử dụng toàn bộ cửa sổ) để người dùng cần cuộn càng ít càng tốt.

Tôi cũng không thể sử dụng javascript, bởi vì một số người dùng nhất thiết phải hoang tưởng và phải vô hiệu hóa nó.

Một số tùy chọn Tôi đã xem xét:

  • Một bảng với chiều rộng cửa sổ di động của cuộn và chiều cao thiết lập đến 100% và tất cả những người khác tới 1%
    Không làm việc. Bảng (và do đó trang) mở rộng để chứa toàn bộ biểu đồ, ngay cả với vị trí tuyệt đối trên ngăn di chuyển DIV.
  • Định vị tuyệt đối để bù ngăn cửa sổ từ cuối trang theo chiều cao của chân trang
    Hoạt động nhưng không chính xác: chiều cao của chân phụ thuộc vào kích thước phông chữ hiện tại và văn bản có được bao bọc hay không. Điều này có nghĩa là tôi phải để lại một biên độ lớn để đảm bảo họ không trùng lặp.
  • Đặt sơ đồ trong IFRAME
    Giải pháp tốt nhất mà tôi đã tìm thấy với kịch bản bị vô hiệu hóa, nhưng hạn chế những gì tôi có thể làm gì trong kịch bản khi họ được kích hoạt.

Tôi nhận thấy rằng Google Maps sử dụng khu vực có kích thước cố định cho bản đồ khi tập lệnh bị tắt. Nếu Google đã từ bỏ vấn đề này thì điều đó có nghĩa là nó không khả thi?

Trả lời

11

Sử dụng chiều cao: Thuộc tính CSS 100% sẽ làm cho nó hoạt động.

Xem liệu Dave Woods 100% Height Layout Using CSS có phù hợp với bạn hay không.

+0

Một phần của điều này hữu ích - Tôi không biết bạn có thể đặt chiều rộng và chiều cao theo kiểu của phần tử - Tôi đã gói mọi thứ trong DIV cấp cao nhất với vị trí tuyệt đối. Bây giờ tôi chỉ cần một cách để nói "cung cấp cho đầu trang/chân trang/hình thức không gian tối thiểu của họ và cung cấp cho tất cả phần còn lại vào ngăn cuộn". – finnw

4

Đó là một khía cạnh ít được biết đến của thuộc tính CSS position: absolute; sẽ cung cấp cho bạn bố cục bạn đang tìm kiếm. Bạn hoàn toàn có thể định vị một phần tử trong TẤT CẢ 4 hướng, trên cùng, bên phải, phía dưới và bên trái. Điều này có nghĩa là một hộp có thể là chất lỏng như trình duyệt và luôn giữ khoảng cách tương tự với các cạnh của vùng chứa mà bạn chỉ định.

div { 
    position: absolute; 
} 
#main { 
    top: 8em; // 8em 
    left: 0; 
    bottom: 8em; // 8em 
    right: 300px; 
    overflow: auto; 
} 
#header { 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 8em; 
} 
#sidebar { 
    top: 8em; 
    right: 0; 
    bottom: 8em; 
    width: 300px; 
    overflow: auto; 
} 
#footer { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 8em; 
} 

Để xem ví dụ http://www.sanchothefat.com/dev/layouts/cssframes.html và sau đó xem nguồn và tách CSS ra để xem cách thực hiện trong ví dụ phức tạp hơn.

Nếu bạn thực hiện phương pháp này, bạn phải hoàn toàn định vị TẤT CẢ các thùng chứa chính <div> s. Sử dụng ems nếu kích thước phông chữ là một mối quan tâm.

PS. Có một gotcha trong đó IE6 messes lên (sốc!) Tuy nhiên các ví dụ tôi đã cung cấp có một dự phòng IE6. Chỉ cần một chiều cao cố định sẽ là tốt mặc dù.

+0

Tôi nghĩ rằng điều này cũng giống như lựa chọn của tôi # 2 – finnw

+0

vâng xin lỗi tôi đã không làm theo lúc đầu, chỉnh sửa câu trả lời của tôi cho phù hợp hơn – roborourke

+0

Tôi nghĩ rằng đó là lựa chọn tốt nhất của bạn khi bạn nêu đầu trang và chân trang của bạn có chiều cao cố định. Nếu không, nếu bạn không muốn sử dụng javascript, bạn sẽ phải sử dụng một khu vực chiều cao cố định cho sơ đồ. – roborourke

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