CSS - круглый div резиновый

Тема в разделе "Верстка", создана пользователем RedRabbit, 1 апр 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. RedRabbit

    RedRabbit

    Регистр.:
    11 июл 2008
    Сообщения:
    608
    Симпатии:
    251
    Почему не работает height и width с процентами, а с фиксированной длиной работает? И как сделать, чтобы div имел резиновый вид?

    Код:
    .menucircle3 {
        background-size: cover;
        background-repeat: no-repeat;
        background-image:url(image.png);
        height:100%;
        width:100%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 5px solid;
        border-radius: 9999px;
        border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1);
    }
     
  2. ultra

    ultra

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    216
    Симпатии:
    334
    body,html{height:100%,width:100%}.
     
    Последнее редактирование: 1 апр 2014
    RedRabbit нравится это.
  3. Platton

    Platton Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    77
    Симпатии:
    18
    Все работает даже если заданы проценты ширины и высоты дива: screenshot.2.png
    Просто не контачит с стилем border-color.
    Сделаете так:
    Код:
    .menucircle3 {
      background-size: cover;
      background-repeat: no-repeat;
      background-image:url(image.png);
      height:100%;
      width:100%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border: 5px solid;
      border-radius: 9999px;
       /*border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1);*/
      border-color:#0000;
    }
    
     
  4. Psyho

    Psyho Писатель

    Регистр.:
    29 мар 2013
    Сообщения:
    8
    Симпатии:
    0
    у меня тоже с процентами не работает
     
  5. DevOrc

    DevOrc Создатель

    Регистр.:
    5 июн 2014
    Сообщения:
    31
    Симпатии:
    10
  6. amrnull

    amrnull Писатель

    Регистр.:
    3 июл 2013
    Сообщения:
    3
    Симпатии:
    0
    если родительский блок absolute или relative, то можно так
    .menucircle3 {position:absolute; top:0;left:0;bottom:0;right:0}
     
  7. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    относительно чего видс и хейдс должно быть 100%
    кусок хтмл в студию
     
  8. snooper

    snooper Постоялец

    Регистр.:
    2 июн 2014
    Сообщения:
    68
    Симпатии:
    19
    во первых задай min-width
    во вторых задай width с размерами для выше стоящих по ДОМу елементов, иначе сейчас не счего считать размеры 100%, он не знает от чего отталкиватся, 100% от 100рх, или же 100% от 10000000рх. Задай для родителя размеры строгие, а этому задай процентный и минимальный, высоту вопще выкинуть можеш из стиля