当侧边栏收缩时内容宽度增加，打开时内容宽度减少用css怎么写
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当侧边栏收缩时内容宽度增加，打开时内容宽度减少用css怎么写相关的知识，希望对你有一定的参考价值。
这个css代码如何实现，求大神指教
想要的效果是橘色宽度自适应侧边栏的宽度，距离侧边栏固定距离
橘色部分使用绝对定位，比如侧边栏宽度为200px,橘色部分的绝对定位就写left:200px;right:0;
收缩后减少left的值，比如left：20px;
收缩后的橘色这块儿代码怎么写
追答我回答的第二部，用js改变橘色块的left值
参考技术A 你好，可以将橘色部分的宽度设置成 计算得到的数值 。
width:calc(总宽 - 侧边栏宽度);追问
我是想让橘色的这部分自适应侧边栏的宽度，这个用calc只是固定宽度
追答可以使用js动态获取侧边栏宽度，因为你点击侧边栏的显示与隐藏，肯定会有宽度的动态变化，获取到这个变化，通过减法，将得到的结果再给橘色的就行了。
只是改变侧边栏和橘色部分的width的style。没点一次进行获取并重新赋值。
在js代码里，赋值给橘色部分宽度时，使用calc，更灵活点
能帮忙写一下这块儿的代码吗？
参考技术B默认展开的css：
#leftwidth: 260px;
bottom: 0;
top: 0;
background-color: #e6effb;
border-left: 1px solid #c0d7f5;
border-right: 1px solid #c0d7f5;
position: absolute;
left: 0;
#right
margin-left: 260px;
overflow: hidden;
padding: 20px;
缩起来，都加个class：
#left.sitwidth: 50px;
#right.sit
margin-left: 50px;
主要内容流动的右浮动侧边栏 - 如何？
【中文标题】主要内容流动的右浮动侧边栏 - 如何？【英文标题】：Right-floated sidebar with main content flowed around - how? 【发布时间】：2010-09-21 01:14:42 【问题描述】：我想创建一个网页布局，侧边栏位于右侧，主要内容围绕侧边栏流动。
要求：
-
侧边栏下方的内容应占据所有可用宽度
侧边栏下方的内容在碰到侧边栏左侧时不应换行
主要内容应在标记中的侧边栏之前
侧边栏的宽度固定但高度未知/可变
仅 CSS - 无 JavaScript 解决方案
这可以在没有第三个要求的情况下实现：如果侧边栏在标记中的主要内容之前并且在同一个包含元素内，那么一个简单的右浮动就可以完成这项工作。标记中主要内容之前的侧边栏不是这里的选项。侧边栏将包含补充信息和广告。如果这是在标记中的主要内容之前，那么对于无 CSS 浏览器和屏幕阅读器用户来说会很烦人（即使使用“跳转到...”链接）。
这可以在没有第四个要求的情况下实现。如果侧边栏的高度是固定的，我可以在主要内容之前放置一个包含元素，使其向右浮动并给它一个合适的宽度和高度，然后使用绝对定位将侧边栏放在预制空间的顶部。
示例标记（无 CSS，仅相关位）：
<body>
<div id="content">
<p>
Lorem ipsum ....
</p>
<p>
Pellentesque ....
</p>
<div id="sidebar">
/* has some form of fixed width */
</div>
</div>
</body>
示例布局：
alt text http://webignition.net/images/layoutexample.png
我不确定这是否可能。我很高兴接受权威的回答，说明这是无法实现的。如果这不能实现，我会很感激解释 - 知道为什么不能实现比仅仅被告知不能实现更有价值。
更新：我很高兴看到不满足所有五个要求的答案，只要答案说明忽略了哪个要求以及后果（优点和缺点）无视要求。然后我可以做出明智的妥协。
更新 2：我不能忽略要求 3 - 侧边栏不能位于内容之前。
【问题讨论】：
【参考方案1】：无法完成带有相反源顺序的简单浮动（无 CSS3 草案规范）。务实的方法是首先构建一个支持您所需的源顺序的漂亮布局。 HTML：
<div id="content" class="noJs">
<div id="floatSpace"></div>
<p>Lorem ipsum ....</p>
<p>Pellentesque ....</p>
<div id="sidebar">content</div>
</div>
CSS：
#content position:relative;
#sidebar width:150px; position:absolute; top:0; right:0;
.noJs padding-right:150px;
.noJs #floatSpace display:none;
.js #floatSpace float:right; width:150px;
这满足了除了 1 和 2 之外的所有问题。现在，我们添加 JS：
$(function ()
// make floatSpace the same height as sidebar
$('#floatSpace').height($('#sidebar').height());
// trigger alternate layout
$('#content')[0].className = 'js';
);
这将使内容在#floatSpace 周围浮动，而#sidebar 将保持在其顶部。这比移动#sidebar 更好，因为源顺序保持不变（对于支持 Javascript 等的屏幕阅读器）。
这是JSFiddle of this in action。这种布局确实带来了保持浮动空间高度与侧边栏高度同步的不幸要求。如果侧边栏是动态的或具有延迟加载内容，则必须重新同步。
【讨论】：
【参考方案2】：好的，那么这是另一个答案，因为我们可以忽略其中一个要求，所以跳过内容包含在侧边栏下方的第一个要求。
#sidebar
float: left;
width: 100px;
#actualContent
width: 700px;
float: left;
对代码的唯一更改是您必须将实际内容放入另一个包装器中。
<div id="content">
<div id="actualContent">
<p>...</p>
<p>...</p>
</div>
<div id="sidebar">
<p>...</p>
</div>
</div>
【讨论】：
【参考方案3】：我相信您将不得不为此更改顺序，将侧边栏放在首位。然后，使用 CSS 的 float 属性（在不改变顺序的情况下，div#sidebar 最终会出现在段落下方而不是它们旁边）。 div#sidebar 应该根据高度需要拉伸。
CSS：
#sidebar
float: right;
width: 50px;
HTML：
<body>
<div id="content">
<div id="sidebar">
/* has some form of fixed width */
</div>
<!-- paragraphs -->
</div>
</body>
@Jon Cram [评论]
好的...nvm。你说出了自己的答案，同时又拒绝了。
您不能将一个元素浮动在它之前定义的其他元素周围。浏览器必须能够回答“围绕什么浮动？”它会从下一个元素开始，并尽可能继续。
【讨论】：
对不起，请看要求：边栏不能在标记中的主要内容之前。【参考方案4】：如果您可以重新排列您的 HTML，使侧边栏位于内容之前，那么这很容易：
#sidebar float: right; width: 150px;
.. 然后确保之后将其清除（在#content div 的末尾）。
我知道您的意图是正确的，以正确的顺序提供内容，但除非您期望视觉障碍用户带来大量流量，否则我认为您可能需要重新考虑您的优先事项。
【讨论】：
干杯尼克 - 感谢您考虑我在回答中的意图。在内容之前的标记中有侧边栏对我来说真的不好。我宁愿在内容之后有侧边栏，而不是很好地包装内容。【参考方案5】：据我所知，获得所需侧边栏的唯一方法（没有明显的标记重新排序）是设置 #content position: relative; 和 #sidebar position: absolute; right: 0; top: 0;
不幸的是，绝对定位将使侧边栏脱离流畅的布局，#content 的内容不会如您所愿避开#sidebar。
【讨论】：
【参考方案6】：我现在没有任何地方可以测试它，我不确定它是否会起作用，但是您是否尝试过将侧边栏 div 显示为 inline 并从那里开始？
【讨论】：
以上是关于当侧边栏收缩时内容宽度增加，打开时内容宽度减少用css怎么写的主要内容，如果未能解决你的问题，请参考以下文章
如何增加 SWRevealViewController 侧边栏宽度？