Sử dụng chiều rộng đầy đủ, không bao gồm thanh cuộn tràn với "vị trí: tuyệt đối"

Question

Tôi muốn có một div nhỏ màu đỏ có chiều rộng đầy đủ ở vị trí trên cùng cố định, bên trong một div khác có overflow: scroll. Tôi hy vọng jsFiddle làm cho nó rõ ràng: http://jsfiddle.net/mCYLm/2/.

Vấn đề là div màu đỏ chồng lên thanh cuộn. Tôi đoán right: 0 có nghĩa là bên tay phải của div.wrapper; nó không trừ thanh cuộn của div.main. Khi tôi di chuyển overflow: scroll vào div.wrapper, khi đó biểu ngữ màu đỏ có kích thước phù hợp (fiddle). Tuy nhiên, nó không phải ở một vị trí cố định nữa (di chuyển xuống làm cho biểu ngữ cuộn lên).

Làm cách nào để tôi có thể đạt được hai điều sau đây cùng nhau?

• Biểu ngữ màu đỏ ở vị trí cố định như trong this fiddle.
• Biểu ngữ màu đỏ có chiều rộng đầy đủ ngoại trừ thanh cuộn như trong this fiddle.

Tôi muốn làm việc này trong Google Chrome.

HTML:

<div class="wrapper"> 
    <div class="red-banner"></div> 
    <div class="main"> 
     <div class="item">foo</div> 
     <div class="item">foo</div> 
     <div class="item">foo</div> 
     <div class="item">foo</div> 
    </div> 
</div>​ 

CSS:

div.wrapper { 
    position: relative; 
} 

div.main { 
    height: 200px; 
    overflow-y: scroll; 
} 

div.item { 
    border: 1px solid black; 
    margin: 20px; 
    padding: 20px; 
} 

div.red-banner { 
    background-color: red; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    height: 20px; 
} 

Answer 1

Có vẻ như điều này là không thể với CSS tinh khiết, do đó, đây là một JavaScript (jQuery) hack:

$(function() { 
    var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body"); 
    var $child = $("<div>").css({ height: 2 }).appendTo($container); 
    window.SCROLLBAR_WIDTH = $container.width() - $child.width(); 
    $container.remove(); 
}); 

thì:

$("div.red-banner").css({ 
    right: SCROLLBAR_WIDTH 
}); 

Answer 2

HTML

<div class="scroller"> 
    <div class="banner-wrapper"> 
     <div class="banner"></div> 
    </div> 
</div> 

<div class="main"> 
    <div class="item">foo</div> 
    <div class="item">foo</div> 
    <div class="item">foo</div> 
    <div class="item">foo</div> 
</div>​ 

CSS

* { margin: 0; padding: 0 } 
body { 
    padding-top: 30px; 
} 

div.main { 
    height: 200px; 
    width: 100%; 
    overflow-y: scroll; 
    position: absolute; 
    z-index: 50; 
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0))); 
} 

div.item { 
    border: 1px solid black; 
    margin: 20px; 
    padding: 20px; 
} 

div.scroller { 
    height: 20px; 
    width: 100%; 
    position: absolute; 
    z-index: 100; 
    overflow: hidden; 
} 

div.banner-wrapper { 
    background: transparent; 
    position: relative; 
    height: 20px; 
    overflow-y: scroll; 
    left: 0; 
    margin-right: -20px; 
} 
div.banner { 
    height: 20px; 
    background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));; 
    margin-left: 20px; 
    margin-right: 40px; 
} 

phiên bản phát triển: http://jsfiddle.net/mCYLm/13/
phiên bản cuối cùng: http://jsfiddle.net/mCYLm/14/

trình với zoom và chiều rộng khung nhìn khác nhau.
! BUG: Nút cuộn từ trên cùng bên phải không thể truy cập/có thể nhấp được.

Tested trong:

• IE6,7,8,9 (cửa sổ)
• FF11 (Windows)
• Google Chrome 18 (ubuntu)
• Safari 5.1 (OSX)