Как установить ширину элемента страницы в jQuery

Question

есть панель инструментов в левой части моей страницы, ширина панели инструментов 35 пикселей, основная панель содержимого находится справа от моей страницы и имеет CSS float:right I хотите установить ширину основной панели содержимого со 100% -35 пикселей, чтобы панель инструментов отображалась, как я могу добиться этого эффекта, большое спасибо.

Answer 1

Вы можете использовать calc(). Но я не уверен в совместимости с браузером. Поэтому попробуйте jquery-решение.

Макет должен быть таким.

<div style="width: 100%"> 
    <div id="toolbar" style="display: inline-block; width: 35px"></div> 
    <div id="main-content" style="display: inline-block"></div> 
<div> 

в JQuery:

$("#main-content").width($(window).width() - 35); 

если есть обивка или запас их обнаружения также.

Answer 2

Звучит так, что это можно легко сделать с помощью CSS.

#main-content { 
    width: 100%; 
    margin-right: 35px; 
} 

Answer 3

Это удобно, используя absolute положение. Не нужно использовать javaScript и правильно обрабатывать событие изменения размера экрана. CSS-код, как ниже:

.toolbar { 
    position: absolute; 
    width: 35px; 
} 

.content { 
    position: absolute; 
    left: 35px; 
    right: 0px; 
} 

увидеть demo в jsFiddle.

Answer 4

Чистого CSS подход, основанный:

CSS:

.container { 
    padding-left: 50px; 
    border: 1px solid red; 
} 

.toolbar { 
    width: 35px; 
    margin-left: -50px; 
    padding: 0 5px; 
    list-style-type: none; 
} 

.main { 
    width: 100%; 
} 

.col { 
    display: inline-block; 
    vertical-align: top; 
} 

HTML:

<div class="container"> 
    <ul class="toolbar col"> 
    <li>Link1</li> 
    <li>Link2</li> 
    <li>Link3</li> 
    </ul> 
    <div class="main col"> 
    <p>This is the place holder for Main Content</p> 
    </div> 
</div> 

http://cdpn.io/hlfFG