如果我們想實現下圖的效果（一行中放兩個div，左邊的一個div寬度固定，右邊的div橫向鋪滿）：

首先我們先寫三個div：父div包裹兩個div。

    

        
left
        
right
    

且給三個div添加最基本樣式：外層寬度100%，左邊div固定寬度，右邊div不給寬度（默認100%）

.content {
    width: 100%;
    height: 200px;
}

.left {
    width: 100px;
    height: 100%;
    background: red;
}

.right {
    background: blue;
    height: 100%;
}

現在的效果如下：

下面來介紹一下如何實現一個div寬度固定，另一個div鋪滿剩余空間：

方法1：用flex布局：

給content添加?display: flex; 屬性，給right添加?flex: 1; 屬性。

.content {
   /* ... */
    display: flex;
}

/* ... */

.right {
    /* ... */
    flex: 1;
}

方法2：用浮動布局和overflow屬性：

給left添加?float: left; 屬性，給right添加?overflow: hidden; 屬性。

/* ... */

.left {
    /* ... */
    float: left;
}

.right {
    /* ... */
    overflow: hidden;
}

方法3：用浮動和左邊距：

給left添加?float: left; 屬性，給right添加?margin-left: 100px; 屬性。

/* ... */

.left {
    /* ... */
    float: left;
}

.right {
    /* ... */
    margin-left: 100px;
}

?

?

?

?

?

如果我們想實現下圖的效果（一列中放兩個div，上面的div高度固定，下面的div豎向鋪滿）：

首先我們先寫三個div：父div包裹兩個div。

    
top
    
bottom

且給三個div添加最基本樣式：外層高度設置成300px，上面div固定高度，下面div不給高度（默認不是100%）

.content {
    width: 200px;
    height: 300px;
    border: 1px solid black;
}

.top {
    width: 100%;
    height: 100px;
    background: red;
}

.bottom {
    width: 100%;
    background: blue;
}

現在的效果如下：

下面來介紹一下如何實現一個div高度固定，另一個div鋪滿剩余空間：

方法1：用flex布局：

給content添加?display: flex;flex-direction: column; 屬性，給bottom添加?flex: 1; 屬性。

.content {
    /* ... */
    display: flex;
    flex-direction: column;
}

/* ... */

.bottom {
    /* ... */
    flex: 1;
}

方法2：用calc設置高度：

給bottom添加?height: calc(100% - 100px); 屬性。

/* ... */
.bottom {
    /* ... */
    height: calc(100% - 100px);
}

方法3：用絕對定位：

給content添加?display: relative; 屬性，給bottom添加?position: absolute; top: 100px; bottom: 0;??????? 屬性。

.content {
    /* ... */
    position: relative;
}

/* ... */

.bottom {
    /* ... */
    position: absolute;
    top: 100px;
    bottom: 0;
}

?