左侧固定宽度的div和右侧自适应宽度的div

Question

我希望左侧有一个固定宽度的<div>，右侧有一个弹性<div>，以适应窗口大小调整。此外，左侧<div>是可折叠的（我使用jQuery将其隐藏并设置负边距），然后我需要右侧<div>具有完整的宽度。

PS：我无法在带有填充的容器内拥有100％宽度的<div>而不出现水平滚动条...

- Vitor Reis

---

你可以提供你的代码吗？HTML和CSS作为起点。 - Jason Gennaro

Answer 1

我希望左侧有一个固定宽度，右侧可以随窗口大小调整而灵活变化。只需对左侧的

使用“float: left”，并在右侧的

中添加“overflow: hidden”即可。

参见：http://jsfiddle.net/JsLuG/ 此外，左侧是可折叠的（我使用jQuery将其隐藏，并带有负边距），然后我需要右侧占满整个宽度。

这与我的方法相符：http://jsfiddle.net/JsLuG/1/ PS：在带有填充的容器内无法使

的宽度达到100％而不出现水平滚动条，因为“width: 100%”不包括填充。

请参见：http://css-tricks.com/2841-the-css-box-model/

解决这个问题的最简单方法是不声明width: 100%。块级元素默认会占据“全宽度”（width: auto）。

或者，添加一个包装元素并将padding放在其中。或者，使用box-sizing: border-box。

- thirtydot

---

这真的很有趣，我没想到 overflow: hidden 会改变 div 的定位方式。你知道为什么会发生这种情况吗？ - hughes

似乎overflow: auto也可以工作，但不是overflow: visible。 - hughes

overflow: hidden 强制创建一个新的“块级格式化上下文”。本文解释了它：http://colinaarts.com/articles/the-magic-of-overflow-hidden/ - thirtydot

真的很有趣的溢出用法，而且回答了所有问题。 - Vitor Reis

Answer 2

只需将右侧div的margin-left设置为左侧div的宽度。当运行脚本折叠左侧div时，您需要调整右侧div的margin。 http://jsfiddle.net/vpKfn/

- hughes

Answer 3

这是使用 position:fixed; 的一个很好的用例。下面的示例将帮助您入门。您可以轻松地为侧边栏隐藏时创建不同的类，并在 div 上切换类以使用不同的位置值。

HTML

<div class="sidebar">side stuff</div>
<div class="main">main content</div>

CSS

.sidebar{
    background-color:#CCC;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:150px;
}

.main{
    background-color:#AAA;
    position:fixed;
    left:150px;
    top:0;
    bottom:0;
    right:0; 
}

- Bobby Borszich