Процентная ширина абсолютно позиционированного элемента

От CSS 10.2;Процентная ширина абсолютно позиционированного элемента

Определяет процентную ширину. Процент вычисляется по ширине блока сгенерированного блока. Если ширина используемого блока зависит от ширины этого элемента, то результирующий макет не определен в CSS 2.1. Примечание. Для абсолютно позиционированных элементов, содержащий блок, основанный на элементе блочного контейнера, процент вычисляется относительно ширины поля заполнения этого элемента. Это изменение от CSS1, где процентная ширина всегда вычислялась относительно поля содержимого родительского элемента.

Я нахожу довольно странным, что процент вычисляется по-разному в зависимости от того, расположен ли элемент абсолютно или нет. Однако я довольно новичок в CSS, поэтому я предполагаю, что для этого есть веская причина. Однако есть ли способ вернуть вычисление ширины относительно содержащего блока в отличие от заполнения, не меняя в дочернем элементе position: absolute? В настоящее время я width:100% в абсолютно позиционированный дочерний элемент и этот маленький нюанс расцепление меня с макетом, очень похожий на this jsfiddle демонстрации:

источник

2016-06-22 SergeantPenguin

Возможно установка' бокс-проклейки: пограничную-box' на родительский контейнер сделал бы это? – venture

Это то, что вы ищете: https://jsfiddle.net/LGSon/2swkkpyo/1/ – LGSon

@LGSon Только что обновил мой пример, он должен был быть «padding-right» и «text-align: right». Поскольку ширина '100%', которая является w.r.t блоком заполнения, я не могу отложить правую сторону от содержащего блока. 'Padding-right' практически ничего не делает. – SergeantPenguin

Вот один, который имеет как правые отступы и правое поле, используйте тот, который вам нужно.

Если вы хотите, чтобы заполнить родительскую ширину region «s, установить право на 0 (right: 0;)

*{ 
 
    border: 2px solid red; 
 
} 
 

 
html { 
 
    height: 50%; 
 
    border: 2px dashed yellow; 
 
} 
 

 
body { 
 
    margin: 60px; 
 
    height: 100%; 
 
    width: 50%; 
 
    padding-right: 50px; 
 
    position:relative; 
 
    background: #666; 
 
    color: #aaa; 
 
} 
 

 
.region{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 40px; 
 
    padding-right: 40px; 
 
    border: 2px dashed white; 
 
    text-align: right; 
 
}

<div class="region">hello</div>

источник

2016-06-22 15:49:35 LGSon

Спасибо, но для того, чтобы быть ясным, мне нужно было бы вручную изменить значение 'right' области, если бы я был для каждого изменения дополнения в' body', right ? – SergeantPenguin

@SergeantPenguin да ... или просто используйте дополнительный контейнер: https://jsfiddle.net/2swkkpyo/5/ – DaniP

@SergeantPenguin, что вы хотите точно? Если вы не хотите вести себя как элемент с абсолютной позицией, вы не устанавливаете абсолютную позицию – blonfu

не представляется возможным, но вы можете сделать небольшой трюк, удалить width:100% добавить right:0 и left:200px → значение отступа родителя:

*{ 
 
    border: 2px solid red; 
 
} 
 

 
html { 
 
    height: 50%; 
 
    border: 2px dashed yellow; 
 
} 
 

 
body { 
 
    margin: 60px; 
 
    height: 100%; 
 
    width: 50%; 
 
    padding-left: 200px; 
 
    position:relative; 
 
    background: #000; 
 
    color: #aaa; 
 
} 
 

 

 
.region{ 
 
    position: absolute; 
 
    top: 0; 
 
    left:200px; 
 
    right:0; 
 
    border: 2px dashed white; 
 
}

<body> 
 
    <div class="region">hello</div> 
 
</body>

источник

2016-06-22 15:44:29 blonfu

Процентная ширина абсолютно позиционированного элемента

ответ

Смежные вопросы