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

Question

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

0

Я делаю приложение, используя CSS и div в HTML, это меню ресторана, у меня есть каркас, который я должен подчиняться, поэтому я использую пиксельное позиционирование внутри 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>

Refaat 01 окт. 2013, в 14:31

Источник

0

Почему вы не используете процент?
Donovan Charpin 01 окт. 2013, в 11:48
0

как я хочу, чтобы итог и подтвердить дивы в предопределенной позиции, как на первом изображении
Refaat 01 окт. 2013, в 11:50
0

Создайте jsFiddle, и я пытаюсь решить вашу проблему.
Donovan Charpin 01 окт. 2013, в 11:51
0

Почему бы не сделать position: fixed; слева внизу или хотя бы в position: relative; внутри другого div и затем используйте bottom: 0px; right: 0px;
AaronHatton 01 окт. 2013, в 12:11
0

@DonovanCharpin вот скрипка
Refaat 01 окт. 2013, в 12:22
0

jsfiddle.net/J9GNV/2 попробуйте этот код, чтобы вдохновить, но height:100%; записи height:100%; на #div1 и #div2 вместо height:300px
Donovan Charpin 01 окт. 2013, в 12:32
0

это нормально в jsfiddle, но в браузерах это ничего не дает
Refaat 01 окт. 2013, в 13:02
0

@AaronHatton Как я могу сделать это относительно другого div?
Refaat 01 окт. 2013, в 13:03
1

@Refaat, см .: stackoverflow.com/questions/11143273/…
AaronHatton 01 окт. 2013, в 13:32

Показать ещё 7 комментариев

Теги:

html

css

jsfiddle

3 ответа

Ещё вопросы

Почему вы не используете процент?
как я хочу, чтобы итог и подтвердить дивы в предопределенной позиции, как на первом изображении
Создайте jsFiddle, и я пытаюсь решить вашу проблему.
Почему бы не сделать position: fixed; слева внизу или хотя бы в position: relative; внутри другого div и затем используйте bottom: 0px; right: 0px;
jsfiddle.net/J9GNV/2 попробуйте этот код, чтобы вдохновить, но height:100%; записи height:100%; на #div1 и #div2 вместо height:300px
это нормально в jsfiddle, но в браузерах это ничего не дает
@AaronHatton Как я могу сделать это относительно другого div?

Olèp · Answer 1 · 2013-10-01T11-22-00.000Z

Самый простой способ, о котором я могу думать, - изменить ширину: 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;
}

Ajis · Answer 2 · 2014-02-03T07-41-00.000Z

Его не большая проблема, просто дайте этому div в пикселе и поместите идентификатор для этой кнопки и дайте этой кнопке ширину 100%

например:

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

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

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

Comms · Answer 3 · 2013-10-01T10-13-00.000Z

если вы хотите изменить ширину или высоту 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";
}