CSS: Các vấn đề về bố cục chất lỏng đặc biệt

alt text CSS: Các vấn đề về bố cục chất lỏng đặc biệt

Xem hình ảnh đính kèm. Làm thế nào điều này được thực hiện? Gosh, tôi đã đi CSS trong 8 năm nhưng bằng cách nào đó không bao giờ phải làm điều này!

Cảm ơn!

Nguồn

2010-12-14 Allen Gingrich

Bạn đang sử dụng tỷ lệ phần trăm cho div lớn hơn của bạn? – DeaconDesperado

Đây là cách tôi làm điều đó:

<style> 
    #container { margin-left: 250px; } 
    #sidebar { 
    display: inline; /* Fixes IE double-margin bug. */ 
    float: left; 
    margin-left: -250px; 
    width: 250px; 
    } 

    /* Definitions for example only: */ 
    #sidebar { background: #FF0000; } 
    #content { background: #EEEEEE; } 
    #sidebar, #content { height: 300px; } 
</style> 

<div id="container"> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</div>

Example here

Nguồn

2010-12-14 23:21:43 simshaun

Tôi đã thực hiện việc này trên trang web của mình một thời gian, nhưng tôi đã mất mã. Dưới đây là một CSS mockup nhanh:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
    </head> 

    <body> 
     <div id="left"> 
      Mr. Fixed-width left 
     </div> 

     <div id="right"> 
      Mr. Dynamic right. Scroll me! 
     </div> 
    </body> 
</html>

Và đây là CSS:

body 
{ 
    padding-left: 230px; 
} 

#left 
{ 
    position: fixed; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    width: 200px; 

    background-color: rgb(150, 150, 150); 
    border-right: 5px solid rgb(50, 50, 50); 

    padding: 10px; 
} 

#right 
{  
    width: 100%; 
    height: 10000px; 
}

này nên làm việc, và đây là một bản sao trực tiếp: http://jsfiddle.net/dDZvR/12/.

Lưu ý rằng bất cứ khi nào bạn thêm đệm, đường viền, lề, v.v ... vào thanh bên trái, bạn phải tăng phần đệm trên phần thân. Nó sẽ giúp bạn tiết kiệm rất nhiều lần gỡ lỗi;)

Chúc bạn may mắn!

Nguồn

2010-12-14 23:21:16 Blender

Mọi phản hồi? Nó có hoạt động không? * thở dài * – Blender

Vâng, tôi thích giải pháp này. –

cách tiếp cận mới này không phá vỡ bố cục như hộp nội dung (bên phải) hữu cơ phát triển. Ngoài ra nó cho phép áp dụng một cách an toàn nguồn gốc và đường viền cho hộp chứa.

.container { 
    width: 100%; 
    height: 100px; 
    overflow: hidden; 
    position: relative; 
} 

.left { 
    position: absolute; 
    width: 80px; 
    height: 100%; 
} 

.right { 
    position: relative; 
    left: 80px; 
    top: 0; 
    margin-right: 100px; 
    height: 100%; 
}

See demo.

Nguồn

2015-02-18 00:46:46 Oriol

You can always use table display layouts (sigh).

.container { 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.container div { 
 
    display: table-cell; 
 
} 
 
.sidebar { 
 
    width: 200px; 
 
    background: gray; 
 
}

<div class="container"> 
 
    <div class="sidebar">fixed width sidebar</div> 
 
    <div>dynamic content</div> 
 
</div>

Nguồn

2015-02-18 01:36:42

Đây là giải pháp chuyển tiếp thẳng nhất mà tôi có thể nghĩ đến.

Bọc cả hai phần tử trong div cha mẹ thành vị trí tương đối, sau đó đặt hoàn toàn thanh bên tĩnh và đặt lề trên div đáp ứng có cùng chiều rộng như thanh bên tĩnh.

HTML:

<div class="wrapper"> 

     <div class="fixed"></div> 

     <div class="responsive">xx</div> 

    </div>

CSS:

.wrapper { 

    width: 100%; 

    } 

    .fixed { 

    position: absolute; 
    bottom: 0; 
    left: 0; 
    top: 0; 


    } 

    .responsive { 

    margin-left: 250px; 

    }

Nguồn

2015-02-18 01:48:54

CSS: Các vấn đề về bố cục chất lỏng đặc biệt

Trả lời

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