javascript - jquery如何设置页面元素的宽度

Question

我的页面左侧有一个工具栏，工具栏的宽度是 35px，主要内容面板在我的页面右侧并且有 CSSfloat:right我想将主要内容面板的宽度设置为 100%-35px ,这样就可以显示工具栏了，请问如何实现这个效果，非常感谢。

Answer 1

纯基于 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

Answer 2

您可以使用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 3

absolute通过使用位置来做到这一点很方便。它不需要使用 javaScript 并且可以正确处理屏幕大小更改事件。像下面这样的CSS：

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

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

请参阅 jsFiddle 中的演示。

Answer 4

听起来像这样可以很容易地用 CSS 完成。

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