Question

我的页面左侧有一个工具栏，工具栏的宽度为35px，主要内容面板位于我的页面右侧并且有CSS float:right我想设置宽度主要内容面板有100％-35px，这样可以显示工具栏，怎样才能达到这个效果，非常感谢。

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

使用absolute位置这样做很方便。它不需要使用javaScript，它可以正确处理屏幕大小更改事件。像贝娄这样的CSS：

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

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

请参阅jsFiddle中的demo。

Answer 3

纯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 4

使用CSS可以很容易地完成这个。

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

如何在jquery中设置页面元素的宽度

4 个答案: