изменить размер абсолютного div внутри относительного div с помощью Liquid CSS

Хорошо... вот моя проблема: у меня есть веб-страница с html и телом, установленным из css в:

body,html{
    position: fixed;
    width: 100%;
    height: 100%;
    overflow:hidden;
}

а также тег webkit для отключения полосы прокрутки:

/*Disable scrolling*/
::-webkit-scrollbar { 
    display: none; 
}

внутри тела я использую 3 div, чтобы покрыть все доступное пространство на странице: (я не буду использовать фактический код css для div, потому что это неважно в этом вопросе, и я напишу только базовый код, чтобы получить идею) как я сказал, три относительных элемента div, чтобы покрыть доступную 100% высоту и ширину:

.div1{
    position: relative;
    width: 100%;
    height: 10%;
}
.div2{
    position: relative;
    width: 100%;
    height: 80%;
}
.div3{
    position: relative;
    width: 100%;
    height: 10%;
}

Теперь вот моя проблема: * внутри среднего div (div2) у меня есть 4 концентрических круга, все из которых являются абсолютными div, написанными в css3. Очень важно, чтобы эти элементы div оставались «абсолютными».

вот css для них:

.size-large,
.size-normal,
.size-small,
.main-frame{
    position:absolute;
    left:0;
    right:0;
    margin:0 auto;
    background: transparent;
    border: 3px dotted #999;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    top: 50%;
}

    .main-frame{
        width: 50%;
        padding-bottom: 50%;
        margin-top:-25%; /* push back half */
    }
    .size-large{
        width: 30%;
        padding-bottom: 30%;
        margin-top:-15%; /* push back half */
    }
    .size-normal {
        width: 20%;
        padding-bottom: 20%;
        margin-top:-10%; /* push back half */
    }
    .size-small {
        width: 10%;
        padding-bottom: 10%;
        margin-top:-5%; /* push back half */
    }

Проблема в том, что эти круги не изменяются в зависимости от относительного div, которому они принадлежат. Их ширина/высота в процентах задается в зависимости от элемента body.

Я хочу, чтобы мой дизайн был плавным и использовал только доступную веб-страницу без прокрутки, а также чтобы изменять размер всех ее элементов на любом дисплее.

ПОЛНОЭКРАННЫЙ РЕЗУЛЬТАТ: http://jsfiddle.net/Nn7mU/1/embedded/result/

ВИД КОДА: http://jsfiddle.net/Nn7mU/1/


css responsive-design css-position absolute
person Ionut Florin Lupu    schedule 26.03.2014    source источник
comment
У вас есть демо-версия jsFiddle или что-то, чем вы можете поделиться? Или хотя бы ваш HTML?   -  person Zach Saucier    schedule 27.03.2014
comment
@ZachSaucier Сейчас я сделаю демо, дай мне 5 минут, пожалуйста.   -  person Ionut Florin Lupu    schedule 27.03.2014
comment
@ZachSaucier Это ПОЛНОЭКРАННЫЙ результат: jsfiddle.net/Nn7mU/embedded/result и вот ссылка на код: jsfiddle.net/Nn7mU   -  person Ionut Florin Lupu    schedule 27.03.2014
comment
@ZachSaucier Извините, мне пришлось обновить ссылки, потому что я оставил там ненужный текст. Ссылки я написал в исходном посте. Я также оставлю их в этом комментарии: jsfiddle.net/Nn7mU/1/embedded/result и jsfiddle.net/Nn7mU/1   -  person Ionut Florin Lupu    schedule 27.03.2014

Ответы (1)


arrow_upward
0
arrow_downward

Насколько я понимаю, вы хотите, чтобы ваши концентрические круги оставались в пределах синего div, сохраняя при этом идеальный круглый круг в соответствии с установленной вами процентной шириной (т.е. .main-frame {width: 50%}, .size-large {width : 30%), .size-normal {ширина: 20%}, .size-small {ширина: 10%})

Ваши круги действительно настраиваются в соответствии с вашим синим div (на основе ширины%, а не высоты%). Итак, поскольку ваш синий div имеет ширину = 100%, круги будут корректироваться только в соответствии с этим.

Вам нужно будет найти способ использовать ОБА высоту и ширину%, чтобы сохранить соотношение сторон и центральное позиционирование.

Я бы порекомендовал прочитать эту тему, в которой представлены возможные решения: HTML и CSS Fluid Circle

person user2986096    schedule 27.03.2014