Question

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

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

一个选项是使用calc()功能，虽然它不是IE 9下的supported，但您需要为FF 15添加-moz和-webkit前缀＆安培; Chrome 25及以下版本。在@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/

你也可以给#right div一个负右边距等于#left div的宽度：

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

Answer 2

DEMO FIDDLE

注意 - 我正在故意更改right和left div的html放置

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;
}

Answer 3

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

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

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

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

左div液体宽度，右div宽度px

3 个答案: