Как сделать отзывчивый div?

Question

Я делаю приложение с использованием CSS и div в HTML, это меню ресторана, у меня есть каркас, который я должен подчиняться, поэтому я использую пиксельное позиционирование внутри CSS, а не процентное соотношение, поэтому при открытии веб-сайта в развернутом состоянии выглядит следующим образом:

Но при минимизации его проклятье это размеры и позиции не ответ на этот вопрос:

здесь является fiddle

**** Кодекс: **

* 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>  

Answer 1

, когда вы хотите изменить ширину или height onclick = "", тогда вы можете использовать javascript для изменения размеров. Javascript также может изменять положение объектов - Посмотрите на него.

HTML

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

CSS

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

JS

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

Answer 2

Самый простой способ я могу думать: изменить ширину : 381px до max-width: 381px и добавьте ширину: 100%. Таким образом, если есть достаточно места для кнопки, оно будет шириной 381 пикселей и, если нет места, оно будет соответствовать заданной ширине.

Код 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; 
} 

Answer 3

Это не большая проблема, просто дать, что DIV в пикселе и поместить идентификатор для этой кнопки и дать этой ширине кнопки 100%

пример:

button div id 
{ 
width:20px; 
height:20px; 
} 

#button 
{ 
width:100%; 
height:20px; 
} 

продолжайте наслаждаться вашим кодирования