CSS: Jak używać calc (100% - 20px), aby uzyskać obszar do wypełnienia całego obszaru INNEGO niż obszar o stałej szerokości?

Question

Przeprosiny za zawiły tytuł. Oto moje skrzypce:

http://jsfiddle.net/PTSkR/152/

Jeśli przeciągnij wynik okienku się być szerszy, widać niebieskie obszary podskoczyć. Powinni zawsze być na górze, wypełniając dowolny obszar paska bocznego (szerokość 275 pikseli). Próbowałem użyć tego:

width: calc(100%-275px); 

Ale to nie działa. Każdy pomysł, jak mogę uzyskać to działa zgodnie z oczekiwaniami?

HTML:

<div id="page-content" class="container-fluid page-host"> 
<div id="shell-row" class="row-fluid"> 
    <div id="sidebar" class="sidebar-nav span2"> 
    </div> 
    <div id="browser-body" class="span10"> 
     <ul class="breadcrumb"> 
     </ul> 
     <div id="container"> 
     </div> 
    </div>  
</div> 
</div> 

CSS:

#page-content { 
    padding: 0px; 
    margin-top: 0px; 
    height: 100% !important; 
} 
#shell-row { 
    height: 100%; 
} 
#sidebar { 
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 
    background-color: #f0f0f0; 
    height: 100%; 
    width: 275px !important; 
} 

#browser-body { 
    margin: 0px 0px 0px 0px !important; 
    background-color: lightblue; 
    width: calc(100%-275px); 
} 
#browser-body.span10 { 
    margin: 0px 0px 0px 0px !important; 
} 
.breadcrumb { 
    background-color: #d0f0f0; 
    margin: 0px; 
    width: 100%; 
    border-radius: 0px; 
    padding: 0px; 
    height: 40px; 
    line-height: 40px; 
} 
#container { 
    padding: 10px; 
    width: 100%; 
} 
html, body{height: 100%;} 

Answer 1

Nie musi być przestrzeń między argumentem, tak:

width: calc(100% - 275px); 

Spójrz na this. Bezpośrednio nad "przykładami" znajduje się następująca uwaga:

Uwaga: Operatory + i - muszą zawsze być otoczone białymi znakami. Operand Calc (50% -8px) na przykład zostanie przeanalizowany jako procent, a następnie ujemna długość, nieprawidłowe wyrażenie, podczas gdy operand Calc (50% - 8px) to procent, po którym następuje znak minus i długość . Operatory * i/i nie wymagają białych znaków, ale dodanie do spójności jest dozwolone i zalecane.