应用场景左侧一个导航栏宽度固定，右侧内容自适应

1.应用场景

左侧导航栏的宽度是固定的，而右侧的内容则根据用户浏览器窗口的宽度进行自适应

2.想法

首先，逐步解决此问题，我们需要克服以下两点：

1）让两个div并排排列

2）假设一个div的宽度固定，另一个div占用剩余宽度的空间

关于第一点，我们必须首先弄清楚div是一个块级元素，并且在文档标准流程中占据了单独的一行。如果您想要连续多个div，可以考虑使div脱离标准流程的方法，例如使用float或absolute;

关于第二点，首先是一个固定宽度的div，自适应div的宽度是多少？首先，此宽度不能写为“ 100％”，因为此处的100％是相对于第一个非静态祖先元素而言的，这意味着如果以这种方式编写，则页面将显示整个页面的宽度+在左侧固定列宽。因此，处理自适应宽度div的方法是不设置其width属性，浏览器将自动对其进行计算以使其占据一行，然后设置margin-left属性以使左侧固定列空间为空。

3.实现

1） html

2） css

/*左固定列*/
.fixedColumn{
	width: 40px;
	height: 100%;
	background-color: red;
	float: left;
	/*position: absolute;
	left: 0;*/
}
/*右自适应列*/
.flexibleColumn{
	height: 100%;
	background-color: blue;	
	margin-left: 40px;
}

注意：

1） fixedColumn中带注释的方法是绝对定位的实现。取消注释后，注释掉float语句即可达到相同的效果

2）使用浮点数时，您需要注意清除由浮点数引起的父元素崩溃的问题（这里不需要清除它，因为自适应列与固定列一样高。列，并且标准流中可以支持父元素）

4.扩展

如果您稍稍更改了上述问题，则需要显示左，中和右布局，并且左右固定，中间自适应，如何实现？

据估计，很会这样想：

在CSS中为.flexibleColumn样式添加属性：margin-right：40px;

将固定列添加到html中，并浮动在右侧：

该操作的效果是...左侧居中布局，右侧为空白，滚动条出现在浏览器中，并且包装后，右侧固定列浮动到右侧。

然后，我们进行一个小的更改，即在自适应列之前添加右浮动固定列的dom，这意味着html的dom顺序为左浮动，右浮动和自适应顺序！ html如下：

实现的效果是“神奇的”〜

这里需要注意的一点是：浮动元素必须在dom中的非浮动元素前面，否则非浮动元素之后的浮动元素将自动换行。

具体原理有待研究..看来我没有在互联网上找到它。如果有人知道，我想通知〜

5.摘要

请务必亲自尝试。请注意，只有固定列不在文档流中，而自适应列仍在文档流中！没有什么可说的，但是应该有更好的方法。当我看到它并总结起来〜

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-370284-1.html