下面来介绍一下如何实现一个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 class="bottom">bottom</div>
且给三个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;
                                    两个DIV，左侧的div宽度固定，右侧DIV自适应填满剩下的宽度。直接上代码↓&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport"
          content="width=d
                                    解法之一:如下例子(以占满整个高度为例  ):&lt;div calss = "ab"&gt;        &lt;div class="a"&gt;div元素a&lt;/div&gt;        &lt;div class="b"&gt; div元素b&lt;/div&gt;&lt;/div&gt;      &lt;style&
                                    因为我打算把下图中红色框中的按钮放到这一行的最后 但是我给按钮中的div给width为100%时会出现下图情况，就是位置会跑乱 后面将width:100%;换为flex-grow: 1;效果如下图  flex-grow: 具体可参考flex-grow - CSS：层叠样式表 | MDN (mozilla.org)
                                    min-width与max-width后面均跟具体数字+html单位 
min-width:50px 最小宽度为50px max-width:50px 最大宽度为50px 
CSS样式结构 
复制代码代码如下: div{min-width:50px} div{max-width:50px}
                                    DIV 高度教程-DIV的高度设置篇如何对div设置高度呢？答案很简单 使用css height样式即可设置div高度。div的高度图我们要对div对象设置高度样式，一般分为设置固定高度，最小高度、最大高度、自适应高度。假如一个DIV对象的class css命名“.div-height”，为了观察到效果，我们对div盒子加css边框样式，设置div宽度 width为300px。一、设置固定高度 ...
                                    简单来说，实现布局最好的方式是 flex，简单兼容现代浏览器和机型。当然，我是因为还没有学 grid（但 grid 要记得参数比较多）。绝对定位和浮动各有优缺点float 区别于其他三种，不需要父元素做容器grid 区别于其他三种，不需要设置子元素（左元素的）宽绝对定位区别于其他三种，它的方法不仅要父元素有高，其子元素也要有高flex 最简单。
                                    使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
2）让一个div宽度固定，另个div占据剩下宽度的空间
关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；