html - 左 div 液体宽度，右 div 宽度（以 px 为单位）

Question

我想制作一个 HTML 布局，其中左 div 调整为窗口大小，右 div 具有固定大小。如何设置左侧的宽度？我不能做 70% 和 30%，因为正确的 div 有固定的大小。

jsfiddle

HTML

<div id="left"></div>
<div id="right"></div>

CSS

.left{
height: 100%;
width: 300px;
background-color: red;
float: left;
}

.right{
height: 100%;
width: ....;
background-color: black;
float: right;
}

Answer 1

#left您可以在元素上使用绝对定位。

小提琴：http: //jsfiddle.net/j73th/10/

#left
{
    position: absolute;
    left: 0;
    right: -100px;
}

#right
{
    float: right;
    width: 100px;
}

Answer 2

一种选择是使用该calc()功能，尽管它在 IE 9 以下不受支持，并且您需要为 FF 15 和 Chrome 25 及以下版本包含-moz和前缀。-webkit正如@cimmanon 在下面的评论中指出的那样，移动浏览器几乎也不支持它。

#left{
height: 100%;
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
background-color: red;
float: left;
}

http://jsfiddle.net/j73th/1/

你也可以给#rightdiv 一个负的右边距，等于#leftdiv 的宽度：

http://jsfiddle.net/j73th/3/

Answer 3

演示小提琴

注意-我故意更改 htmlright和leftdiv的位置

html代码——

<div id="right"></div>
<div id="left"></div>

css代码——

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

#left{
height: 100%;
margin-right:102px;
background-color: red;
} 

#right{
height: 100%;
width: 100px;
float:right;
background-color: black;
}