Вёрстка « Position fixed и ширина в процентах

есть примерно такая структура
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<body>
    <div id="sidebar"></div>

    <div id="content"></div>
</body>
 


Для #sidebar задано Position: fixed и ширина в процентах 20%. Для #content задан margin-left: 20%. Решил добавить к body min-width (например 550px), но #sidebar не реагирует и все равно продолжает сжиматься при уменьшении ширины окна меньше, чем 550px. Как удалось нагуглить, ширину он считает от ширины viewport'a, а не body. Можно как нибудь ограничить минимальную ширину для #sidebar, не высчитывая 20% от 550?
0
css

1 ответов

попробуйте поставить min-width к saidbar'у. он у вас фиксированный, поэтому его абсолютно не касается все, что находится рядом, сверху, снизу, выше, ниже, над ним и под ним))

2

Решается с помощью JavaScript:


function resizeSidebar()
{
    // Ширина body
    var w = $('body').width();
   
    // Устанавливаем ширину #sidebar равной 20% от ширины body
    $('#sidebar').css('width', w * 0.2);
}

$(function(){
    resizeSidebar();
   
    // Вызываем функцию resizeSidebar() каждый раз при изменении размера окна
    $(window).resize(function() {
        resizeSidebar();
    });
});
 

demo http://jsfiddle.net/LhDVJ/2/

На сколько я знаю, добиться аналогичного кроссбраузерного результата на одном CSS нельзя.
1