Css 如何制作响应性div？

我正在用HTML中的CSS和div制作一个应用程序，这是一个餐厅菜单，我必须遵守线框，所以我在CSS中使用像素定位，而不是百分比，所以当以最大化状态打开网站时，看起来像：

但是，当最小化它的诅咒时，它的大小和位置不会对此做出反应：

这是最新的

****守则：**

*CSS:

    .buttonClass {
    width: 381px;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top,#FFF 0%,#91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top,#FFF,#91BDD6);
    background-image: -o-linear-gradient(top,#FFF,#91BDD6);
    background-image: linear-gradient(top,#FFF,#91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}

.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}

<div id="confirm" class="buttonClass">
  <div align="center">Confirm</div>
</div>    

<div id="total" class="totalClass">
  <div align="left"></div>
</div>      

*div:

    .buttonClass {
    width: 381px;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top,#FFF 0%,#91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top,#FFF,#91BDD6);
    background-image: -o-linear-gradient(top,#FFF,#91BDD6);
    background-image: linear-gradient(top,#FFF,#91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}

.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}

<div id="confirm" class="buttonClass">
  <div align="center">Confirm</div>
</div>    

<div id="total" class="totalClass">
  <div align="left"></div>
</div>      

证实

当您想更改宽度或高度onclick=”“时，您最好使用javascript更改尺寸。 Javascript还可以更改对象的位置—查看它

HTML

<div id="sidebar"></div>
<button onclick="hide_sidebar()" />

JS

#sidebar {
width:200px;
height:100%;
float:right;
margin:0 0 0 0;
transition:0.25s
}

function hide_sidebar() {
document.getElementById("sidebar").style.width="0";
}

---

我能想到的最简单的方法是：将宽度：381px更改为最大宽度：381px，然后添加一个宽度：100%。这样，如果按钮有足够的位置，它将是381px宽，如果没有位置，它将适合给定的宽度

CSS代码将是：

    .buttonClass {
    max-width: 381px;
    width:100%;
    height: auto;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -webkit-linear-gradient(top, #FFF 0%, #91BDD6 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    background-image: -ms-linear-gradient(top, #FFF, #91BDD6);
    background-image: -o-linear-gradient(top, #FFF, #91BDD6);
    background-image: linear-gradient(top, #FFF, #91BDD6);
    border: solid #91BDD6 5px;
    box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
    position: absolute;
    right:0;
    bottom:0;
}
.totalClass {
    width: 376px;
    height: 30px;
    padding: 10px 10px;
    text-align: center;
    line-height: normal;
    border-radius: 7px;
    z-index: 3;
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
    position: absolute;
    right: 0;
    top: 700px;
}

---

这不是什么大问题，只需以像素为单位给出div，并为按钮添加ID，然后将按钮宽度设置为100%

例：

---

然后继续享受您的编码乐趣

为什么不使用百分比？因为我希望在第一张图像中的预定义位置处获得总计和确认div创建一个JSFIDLE，我正在尝试解决您的问题。为什么不将

位置：固定至左下角或至少
位置：相对在另一个div内，然后使用
底部：0px；右：0px@refat请参见：