Bố cục không thể?

Tôi bắt đầu nghĩ rằng điều này là không thể, nhưng nghĩ tôi sẽ hỏi các bạn.Bố cục không thể?

Về cơ bản nó là một bố cục 2 cột, nhưng "kinh doanh" muốn như sau:

-Always mất toàn bộ cửa sổ trình duyệt

thay đổi kích thước -Accommodate của cửa sổ trình duyệt

cột -Left sẽ được cố định chiều rộng, nhưng chiều rộng đó phải linh hoạt từ trang này sang trang khác.

-Left ngang có một vùng ở trên cùng với chiều cao cố định.

-Left ngang có vùng đáy. Nó sẽ chiếm không gian dọc của cửa sổ trình duyệt. Nếu nội dung là rất lớn, nó sẽ có một thanh cuộn chỉ cho khu vực đó.

-Đèn cột sẽ chiếm không gian ngang còn lại của cửa sổ trình duyệt.

-Đèn cao có vùng ở trên cùng với chiều cao cố định.

-Đèn cao có vùng dưới cùng. Nó sẽ chiếm không gian dọc của cửa sổ trình duyệt. Nếu nội dung là rất lớn, nó sẽ có một thanh cuộn chỉ cho khu vực đó.

Tôi đã thử mọi thứ ... divs, floated, hoàn toàn định vị, bảng, divs trong bảng ...

Điều này thậm chí có thể?

Dưới đây là một hình ảnh của những gì nó sẽ giống như thế: http://imgur.com/zk1jP.png

Nguồn

2010-05-21 Kyle K

nên khá thẳng về phía trước, miễn là trái và phải có thể là tỷ lệ chiều rộng màn hình. Tôi có thể thấy một trong những lần thử của bạn không? – edl

bạn đang hỗ trợ những trình duyệt nào? – drusnov

Nên khá dễ dàng nếu bạn đã sẵn sàng để đưa vào một số công việc. – User

Hoàn toàn không thể, và bạn không cần javascript. Bạn cần một số hack IE6 cụ thể nếu bạn quan tâm đến trình duyệt đó.

Chìa khóa để bố cục là bạn có thể đặt một hoặc nhiều hơn vị trí cạnh trên một phần tử được định vị hoàn toàn. Dưới đây là một bài viết tốt về kỹ thuật: http://www.alistapart.com/articles/conflictingabsolutepositions/

Dưới đây là một bản demo: http://www.spookandpuff.com/examples/2col2section.html

và nguồn:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <title>2 col, 2 section layout.</title> 

    <style type="text/css" media="screen"> 
    #leftColumn { 
     position:absolute; 
     top:10px; 
     bottom:10px; 
     left:10px; 
     width:400px; 
    } 

    #rightColumn { 
     position:absolute; 
     top:10px; 
     bottom:10px; 
     right:10px; 
     left:410px;/* This must equal the total width of the #leftColumn, incl padding, border, margin, etc. */ 
    } 

    .topSection{ 
    position:absolute; 
    top:10px; 
    height:120px; 
    left:10px; 
    right:10px; 
    padding:10px; 
    } 

    .bottomSection{ 
    position:absolute; 
    bottom:10px; 
    top:160px; /* This must equal the total height of the .topSection, incl padding, border, margin, etc. */ 
    left:10px; 
    right:10px; 
    padding:10px; 
    overflow-y:auto; 
    } 

    /* Debug styles */ 
    body {background-color:#CCC;} 
    div {border:1px solid #FFF;} 

    #leftColumn {background-color:#7EF4B0;} 
    #rightColumn {background-color:#EEF4A7;} 
    #leftColumn .topSection{background-color:#56A97A;} 
    #rightColumn .topSection{background-color:#D6D06D;} 

    </style> 

</head> 

<body> 
    <div id="leftColumn"> 
     <div class="topSection"> 
     <p>Left column, top section.</p> 
     </div> 

     <div class="bottomSection"> 
     <p>Left column, bottom section.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 

    <div id="rightColumn"> 
     <div class="topSection"> 
     <p>Right column, top section.</p> 

     </div> 

     <div class="bottomSection"> 
     <p>Right column, bottom section.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 
</body> 
</html>

Có một vài thủ đoạn: Trước hết, tôi chỉ thử nghiệm điều này trong Firefox để cung cấp cho bạn ý tưởng chung - có một số bản sửa lỗi cần thiết cho IE mà tôi chưa thêm: kiểm tra danh sách ngoài bài viết trên để biết chi tiết.

Tôi đã cho phép thêm khoảng trống 10px xung quanh tất cả các ô chỉ để minh họa ý tưởng - bạn có thể đặt các giá trị này thành 0 trong bố cục thực.

Bạn có thể thiết lập chiều cao của .topSection khác nhau giữa cột với một số quy tắc như:

#leftColumn .topSection {height:xxx} 
#leftColumn .bottomSection {top:xxx} 

#rightColumn .topSection {height:yyy} 
#rightColumn .bottomSection {top:yyy}

Tôi sẽ sử dụng một container với một lớp học (hoặc một lớp về thẻ cơ thể) để xác định độ rộng của cột bên trái, giống như:

#container.narrow #leftColumn {width:100px} 
#container.medium #leftColumn {width:200px} 
#container.wide #leftColumn {width:400px}

Điều đó cho phép bạn xác định tập hợp các mẫu 'chiều rộng' mà bạn có thể chuyển đổi giữa.

Nguồn

2010-05-21 16:25:02 Beejamin

+1: rất tốt! – ANeves

Điều này thật tuyệt vời. Cảm ơn! –

Wow, thậm chí không bao giờ nghĩ để thử điều đó. vít đề nghị javascript của tôi -Đây là tuyệt vời !!! +1 – Addsy

Nó có thể là giá trị xem xét sử dụng một số javascript để giúp đỡ với vấn đề bố trí của bạn. Trong khi tôi biết điều này không phải là lý tưởng, đó là một giải pháp tôi đã sử dụng thành công trước khi cố gắng để đối phó với bố trí đầy đủ chiều cao.

Nó phải là ok để có được bố trí bạn mô tả không đầy đủ chiều cao di chuyển cột sau đó chỉ cần sử dụng một chút javascript để giữ cho chúng được điền chiều cao của trình duyệt

Nguồn

2010-05-21 15:47:30 Addsy

Bạn có bất kỳ ví dụ nào không? –

Tôi tin rằng đây là khá dễ dàng để làm gì nếu bạn có sự sang trọng trong việc sử dụng khung công tác ext.js. Sẽ cập nhật bằng mã nếu không có ai khác cung cấp câu trả lời tốt hơn và nếu bạn quan tâm.

Cập nhật: Đây là mã. Thử nghiệm và hoạt động tốt với IE6. Nhược điểm so với giải pháp css-only là (i) yêu cầu JavaScript (chủ yếu là ứng dụng đã sử dụng JS); (ii) Yêu cầu Ext.js (có thể hoặc có thể không quá khả thi):

Lưu ý cách sử dụng style = "height: 100px;" int html và autoScroll: true trong mã JavaScript. Điều này cho phép chiều cao cố định của 2 ô trên cùng và tràn với thanh cuộn ở hai phần dưới cùng.

Ext.onReady(function(){ 

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 

    var viewport = new Ext.Viewport({ 
     layout: 'border', 
     resizable: false, 
     items: [ 
      { 
       region: 'west', 
       id: 'west-panel',      
       split: false, 
       width: 300,           
       margins: '0 0 0 0', 
       layout: 'border',      
       items: [{ 
        region: 'north', 
        contentEl: 'west1',            
        border: false 
       },{ 
        region: 'center', 
        contentEl: 'west2',       
        border:false, 
        autoScroll: true 
       }] 
      }, 
      { 
       region:'center', 
       id:'center-panel',      
       split:false,      
       margins:'0 0 0 0', 
       layout:'border',      
       items: [{ 
        region: 'north', 
        contentEl: 'center1',       
        border:false 
       },{ 
        region: 'center', 
        contentEl: 'center2',       
        border:false, 
        autoScroll: true 
       }] 
      }         
     ] 
    });   
});

và html:

<div id="west1" style="height: 70px;background-color: #AAA;"> 
    <p>Hi. I'm fixed.</p> 
</div> 
<div id="west2"> 
    <p> long content goes here</p> 
</div> 
<div id="center1" style="height: 100px;background-color: #333;color: #FFF;"> 
    <p>Hi. I'm fixed too.</p>    
</div> 
<div id="center2">   
<p> long content goes here</p> 
</div>

Demo sẽ có mặt sau đó, một lần nữa, nếu bạn hay bất cứ ai quan tâm. Xin cho biết nếu bạn có thể.

Nguồn

2010-05-21 15:53:52

Vấn đề với việc sử dụng ExtJS là bạn di chuyển quá nhiều bố cục của mình sang Javascript, khi nó được định nghĩa càng nhiều càng tốt trong một bản định kiểu. Có thực sự không cần phải sử dụng javascript trên một bố trí như thế này, ngoại trừ có lẽ là một chút đánh bóng thêm. – Beejamin

@Beejamin: Đồng ý với những gì bạn nói và sẽ không phủ nhận rằng giải pháp chỉ css của bạn chỉ là một giải pháp thông minh. Tôi cũng thích bố trí CSS, chỉ cần không đưa ra một giải pháp thông minh như của bạn. Extjs có vị trí của nó và có lẽ không phải trong trường hợp này. Khoảnh khắc khách hàng của bạn hoặc bạn muốn một bộ tách dọc (giữa ngăn bên trái và bên phải), Extjs đã có nó trong khi với giải pháp chỉ CSS, người ta phải bắt đầu tìm kiếm một plugin jQuery split-pane hoặc một cái gì đó tương tự. Sau đó, các tab, sau đó thanh công cụ, vv, danh sách sẽ tiếp tục. ExtJS làm cho nó dễ dàng sau đó. Sẽ không phủ nhận rằng tôi đã học được một mẹo CSS thú vị từ bạn hôm nay –

Bạn sẽ đến đó với faux columns.

Bạn có thể sử dụng kỹ thuật đó để thực hiện hai lần tách dọc.
Nếu bạn muốn các thanh cuộn riêng biệt (vui lòng không, bạn sẽ làm cho con mèo con có thể sử dụng được) bạn có thể làm cho mỗi phần tách đứng có max-height: 100%; overflow: auto; để làm cho chúng cuộn nếu chúng đạt đến độ cao 100%.

Đối với thanh màu xanh "nổi trên cùng", bạn có thể tách bố mẹ position: relative; padding-top: 150px; và sau đó cung cấp thanh màu xanh position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; overflow: hidden;. (Tôi không chắc chắn về chiều rộng 100%.)
Sau đó, nội dung màu xanh lá cây và màu vàng sẽ không chồng lên nhau.

Nguồn

2010-05-21 16:27:21 ANeves

Bố cục không thể?

Trả lời

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