Фиксированная ширина боковой панели, Fluid Содержание области с 100% ширины таблицы

Question

Я получил эту скрипку: http://jsfiddle.net/gpxeF/1793/

со следующими CSS:

.sidebar{ 
    width: 200px; 
    float: left; 
    background: yellow; 
} 
.content { 
    background: green; 
} 
table { 
    width: 100%; 
    background:#ccc; 
} 

Проблема является таблица, из-за того, установить его при 100% это действительно идет ниже боковой панели. Если я удалю ширину: 100% правило работает нормально, но мне нужно, чтобы таблица использовала все пространство родительского контейнера div. Как я могу это сделать?

Answer 1

Я не парень css, но я думаю, вам нужно добавить ширину и float-left для содержимого div. Вам нужно что-то вроде

.content { 
    background: green; 
    width: 400px; 
    float: left; 
} 

JSFiddle http://jsfiddle.net/rhzky40e/

Answer 2

я думаю, что это могло бы работать

HTML

<div class="sidebar">Fixed<br />Sidebar<br />Goes<br />Here</div> 
<div class="content"> 
    <table> 
     <tr><td>test If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions.</td></tr> 
    </table> 
</div> 

CSS

.sidebar{ 
    width: 200px; 
    float: left; 
    background: yellow; 
} 
.content { 
    background: green; 
    float: left; 
    width: calc(100% - 200px); 
}  
table { 

    background:#ccc; 
} 

Ссылка: jsfiddle

Answer 3

Сегодня (конец 2015 года) вы могли бы сделать это вместо (работает для IE8/9, а).

.table { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
} 
 
.sidebar{ 
 
    width: 200px; 
 
    background: yellow; 
 
} 
 
.content { 
 
    background: lightgreen; 
 
}

<div class="table"> 
 
    <div class="cell sidebar"> 
 
     Fixed<br />Sidebar<br />Goes<br />Here 
 
    </div> 
 
    <div class="cell content"> 
 
     Test 
 
    </div> 
 
</div>

Или с сгибают для новейших браузеров.

.flex { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.sidebar{ 
 
    width: 200px; 
 
    background: yellow; 
 
} 
 
.content { 
 
    flex: 1; 
 
    background: lightgreen; 
 
}

<div class="flex"> 
 
    <div class="sidebar">Fixed<br />Sidebar<br />Goes<br />Here 
 
    </div> 
 
    <div class="content"> 
 
     test 
 
    </div> 
 
</div>

Answer 4

Более распространенным, и я думаю, что лучшим решением будет использовать запас, что это размер боковой панели, чтобы остановить свой контент из текущей под боковой панели:

#fixedWidth{ 
    width: 200px; 
    float: left; 
    background: blue; 
} 
#theRest{ 
    background: green; 
    margin-left: 200px; 
} 

jsfiddle