Как растянуть блок на всю ширину соседнего блока?

Question

[IvanVvV]

Как растянуть блок на всю ширину соседнего блока, ширина которого в свою очередь шире вьюпорта.
То бишь текст "рыба" должен растянуться по ширине блока "рыбак".
Фиксированной остается только ширина block2

https://jsfiddle.net/IvanVvV/hxpud92y/

Поясню, адаптирую сайт под мобильные устройства, область просмотра min-width:410px.
Но, на некоторых страницах, есть блоки шире чем 410px и сделать их 410px это слишком большие временные затраты.
viewport настроен следующим образом content="width=device-width"
При просмотре с телефона страниц с широкими блоками, вьюпорт становится по ширине этого самого широкого блока а вот остальные блоки остаются 410px и не желают растягиваться до всей ширины экрана.

Answer 1

[IvanVvV]

Пока реализовал с помощью javascript, получением ширины блока "рыбак" и установки этой ширины на родительский элемент (body), как подсказал Евгений Вольф
https://jsfiddle.net/IvanVvV/qb51gb3g/1/

<script type="text/javascript">
window.onload = function() 
{
        var width=0;
        width = document.getElementById('block2').offsetWidth
        document.body.style.width=width+'px';
};
</script>

Если кто нибудь огласит решение на css буду признателен.

Answer 2

[Евгений Вольф]

То бишь текст "рыба" должен растянуться по ширине блока "рыбак".

Либо задать одинаковую ширину обоим блокам, одинаковую - в буквальном смысле.

Либо родительский блок должен быть нужной ширины, тогда вложенный блок будет 100% ширины родительского.

Либо, через JS.

Comments

[IvanVvV]

А растянуть родительский блок до ширины рыбака никак не получится?
Я побывал поставить body width:auto , но почему то все равно не тянутся.

Через js каким методом?

[Евгений Вольф]

А растянуть родительский блок до ширины рыбака никак не получится?

В Вашем примере, родительский блок - это BODY - условно говоря, он и так растянут, но не так, как Вы себе это представляете. Ширина в 2000px в этом случае должна быть у BODY (т.е. у родительского блока), тогда ширина вложенных блоков при 100% будет = 2000px.

Через js каким методом?

1. Получить ширину нужного блока
2. Установить ширину зависимого бока равной ширине блока из п.1

На счёт "метода" не совсем понимаю Ваш вопрос. Готового метода в JS'е, который бы проделывал подобную операцию нет, писать код придётся самому. Как вариант, для этого можно использовать JQuery.

[IvanVvV]

На счёт "метода" не совсем понимаю Ваш вопрос

Под методом как раз имел ввиду

1. Получить ширину нужного блока
2. Установить ширину зависимого бока равной ширине блока из п.1

Благодарю за совет, попробую реализовать

Answer 3

[spike__x]

Может так подойдет Пример
То есть поместить block1 в block2, тогда рыба будет подстраиваться под рыбака :)))

Comments

[IvanVvV]

К сожалению не подойдет,

Поясню, адаптирую сайт под мобильные устройства, область просмотра min-width:410px.
Но, на некоторых страницах, есть блоки шире чем 410px и сделать их уже это слишком большие временные затраты.
viewport настроен следующим образом content="width=device-width"
При просмотре с телефона страниц с широкими блоками, вьюпорт становится по ширине этого самого широкого блока а вот остальные блоки остаются 410px и не желают растягиваться до всей ширины экрана.