100% с фиксированным запасом

Question

http://jsbin.com/manez/1/

#container { 
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    margin-left: 50px; 
    background: black; 
    color:white; 
} 
#sidebar { 
    width: 50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: blue; 
    color: white; 
} 

Я хотел бы DIV быть width:100% еще есть левый край 50px, но без нажатия Дива 50px на другом конце и включении горизонтальной прокрутки.

Я понимаю, что это будет возможно с помощью JQuery:

$('#container').width($(window).width() - 50);

, но я после CSS единственное решение, если это возможно.

Answer 1

Если оба div являются абсолютными, то не используйте ширину. Использовать left:50px & right:0 на контейнере div. Div получить ширину соответственно.

Answer 2

Попробуйте:

width : calc(100% - 50px) !important; 

Answer 3

Так что есть на самом деле такие вещи, как: width : calc(100% - 50px). Я бы рекомендовал сначала прочитать об этом (ограниченная поддержка браузера).

Таким образом, мы можем использовать его так:

#container { 
    position:absolute; 
    top:0; 
    left:0; 
    margin-left: 50px; 
    background: black; 
    color:white; 
    width : calc(100% - 50px) 
} 

DEMO HERE

Также больше об этом here