如何用CSS+DIV写两个并列并且左边宽高固定,右边宽高自适应屏幕的层?

html-css011

如何用CSS+DIV写两个并列并且左边宽高固定,右边宽高自适应屏幕的层?,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

html, body { height: 100%margin: 0padding: 0}

.wrap { width: 100%height: 100%}

.fixed { float: leftwidth: 200pxheight: 100%  background: #000margin-left: -100%}

.main { float: leftwidth: 100%height: 100%}

.main-inner { margin-left: 200px  background: #f00height: 100%}

</style>

</head>

<body>

<div class="wrap">

<div class="main">

<div class="main-inner">

test

</div>

</div>

<div class="fixed">a</div>

</div>

</body>

</html>

-------

html和body的高度设置为100%, 这样才能让div#wrap的高度生效.

若要将左侧高度固定,将.fixed的height设置为固定值就行了.

通过绝对定位实现

See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.

注意点如下：

需要套一个“positioned”的父元素 div-a 绝对定位，并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-a 的宽度（因为 div-a 绝对定位已经脱离文档流，故不设定为 div-a 宽度的话，会相互覆盖） div-c 绝对定位并将位置调整为正下方 需要自适应的 div 均设定宽度为100%

2. 通过浮动实现

See the Pen float-two-column by xal821792703 (@honoka) on CodePen.

注意点如下：

div-a 设定为左浮动 div-b 与上面一样需要将 margin-left 属性值设为 div-a 的宽度，原因同上，浮动也会脱离文档流 div-c 最好清除浮动，避免浮动的影响

3. 通过 BFC 规则实现

实现方式：左右元素浮动，中间元素左右marign值撑开两边距离。

例：

此时看似没有问题，可是如果中间内容过多，超出左右两边高度，我们将看到 文字环绕 问题，如下如所示。

解决办法：

补充flex左右布局，左边固定，右边自适应，并且两列等高自适应