Полная ширина CSS с 2 столбцами, фиксированная ширина меню и динамическая ширина содержимого

У меня проблема с исправлением этой проблемы. Я не использую bootstrap, потому что я начал без бутстрапа (и не уверен, что bootstrap может это сделать). У меня есть полная ширина с фиксированной шириной меню. Тогда моя область содержимого должна быть динамичной, потому что я хочу, чтобы она была отзывчивой.Полная ширина CSS с 2 столбцами, фиксированная ширина меню и динамическая ширина содержимого

http://send2list.com/help/troubleshoot.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK"> 
<head> 
    <title></title> 
</head> 
<body style="background-color:#e0e0e0;color:#fff;margin:0px;"> 

    <div style="width:100%;"> 
     <div style="background-color:#000;"> 
     <div style="float:left;background-color:#222223;width:900px;">Content Area<br> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div> 
     <div style="float:right;background-color:#499939;">Right Menu<br>Right menu is fixed with 240px</div> 

     </div> 
    </div> 
</body> 
</html>

источник

2014-12-29 OneNation

Да, это можно сделать с помощью CSS, устанавливая div с до display: table-cell (display: table-cell полностью поддерживается) вместо float: left. Первый div - это процент, а второй - фиксированная ширина. Контейнер должен быть установлен в display: table и table-layout: fixed для обеспечения выполнения фиксированной ширины:

HTML

<div class="container"> 
    <div class="one">Content Area<br/> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div> 
    <div class="two">Right Menu<br/>Right menu is fixed with 240px</div> 
</div>

CSS

.container{ 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 

.one{ 
    display: table-cell; 
    vertical-align: top; 
    /*width: 85%;*/ //REMOVE as VitorinoFernandes pointed out, this is not necesssary seeing how setting the div to display: table-cell within a container set to "display: table" will take the remaining width 
    background: #222223; 
} 

.two{ 
    display: table-cell; 
    vertical-align: top; 
    width: 240px; 
    background: #499939; 
}

FIDDLE

источник

2014-12-29 03:55:41 jmore009

, который работает. Как ширина: 85% играет в композиции? – OneNation

@SathishS вы неправильно поняли вопрос. OP хочет, чтобы второй 'div' имел фиксированную ширину 240px. Если намерение состояло в том, чтобы иметь разные размеры, 'float' было бы более чем – jmore009

, то он занимает всего 85% экрана, его обложка – Sathish

Вы можете сделать это использование calc для установки основной области до 100% - 240 пикселей. Calc поддержка хороша до тех пор, пока вы не должны поддерживать IE8: http://caniuse.com/#feat=calc

Fiddle

.main { 
    float:left; 
    background-color:#222223; 
    width: calc(100% - 240px); 
} 
.sidebar { 
    float:right; 
    background-color:#499939; 
    width: 240px; 
}

источник

2014-12-29 04:03:03 cjspurgeon

Спасибо, я не знал о функции calc. – OneNation

Полная ширина CSS с 2 столбцами, фиксированная ширина меню и динамическая ширина содержимого

ответ

Смежные вопросы