Сделать ширину вложенных div'ов в браузере

Question

Сделать ширину вложенных div'ов в браузере

0

На самом деле это проблема, с которой я столкнулся во время разработки блоггера.

Я хочу написать navbar самостоятельно, но ширина родительских элементов ограничивает width:100% стиля width:100%, даже если я устанавливаю свойства float для него.

См. Изображение выше. Только nav HTML/JS/CSS настраиваются. Итак, как я могу настроить стиль CSS класса nav для архивирования этой цели?

Или, если у вас есть релевантный опыт разработки blogger, скажите, пожалуйста.

Большое спасибо!

Darklizard 08 окт. 2013, в 11:20

Источник

Теги:

html

css

3 ответа

1

Для достижения такого "расслоения" вам, вероятно, необходимо использовать абсолютное позиционирование, особенно если ваши варианты ограничены. У этого есть очевидная оговорка о том, чтобы вывести его из потока страниц, поэтому вам нужно будет убедиться, что ваша страница никогда не слишком короткая, чтобы она была видимой. Это не повлияет на другие элементы вокруг него.

Итак, что-то вроде:

nav {
    left: 0;
    position: absolute;
    top: 400px;
    width: 100%;
}

Надеюсь, один из его родителей имеет position: relative; поэтому nav знает, где использовать точку отсчета при позиционировании абсолютно, иначе он будет использовать левый верхний угол панели браузера.

Вам также может понадобиться значение z-index если вы хотите, чтобы ваш nav отображался за содержимым.

Ryan Williams 08 окт. 2013, в 06:27

0

Спасибо за ответ. Однако я обнаружил, что из-за position: relative; одного родительского элемента position: relative; моя навигация не может убежать от этого. Я здесь симулирую это в jsfiddle: jsfiddle.net/helisz/cRgEC/1
Darklizard 08 окт. 2013, в 09:45
0

@Darklizard Это определенная проблема, особенно если предположить, что вы не можете контролировать этот родительский div . Будет использовать что-то вроде width: 5000px; работать для ваших нужд? Если бы JavaScript был опцией, вы могли бы также использовать это, чтобы динамически установить ширину вашей nav чтобы соответствовать панели браузера. Решением jQuery было бы что-то вроде $(window).resize(function () { $('nav').width($(window).width()); }); ,
Ryan Williams 08 окт. 2013, в 13:04

0

Не уверен, что это то, что вы ищете, но вы можете попытаться дать свое position: absolute; навигации position: absolute; и width: 100%; , Это выведет элемент навигации из потока документа.

SKeurentjes 08 окт. 2013, в 06:55

Ещё вопросы

Спасибо за ответ. Однако я обнаружил, что из-за position: relative; одного родительского элемента position: relative; моя навигация не может убежать от этого. Я здесь симулирую это в jsfiddle: jsfiddle.net/helisz/cRgEC/1
@Darklizard Это определенная проблема, особенно если предположить, что вы не можете контролировать этот родительский div . Будет использовать что-то вроде width: 5000px; работать для ваших нужд? Если бы JavaScript был опцией, вы могли бы также использовать это, чтобы динамически установить ширину вашей nav чтобы соответствовать панели браузера. Решением jQuery было бы что-то вроде $(window).resize(function () { $('nav').width($(window).width()); }); ,

Guillaume Lehezee · Accepted Answer · 2013-10-08T06-56-00.000Z

использовать положение абсолютное для вашего nav. Посмотрите на этот FIDDLE

html:

<div class="first">0</div>
<div>
    1
    <div class="nav">NAV</div>
</div>
<div>2</div>

css:

div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }

РЕДАКТИРОВАТЬ

Ваш навигатор находится в position:relative; хорошо вы можете добавить свой навигатор к своему телу с помощью этого jquery (ЗДЕСЬ ОБНОВЛЕНО FIDDLE):

$(".nav").appendTo("body");

Спасибо за вашу демонстрацию! , Однако я обнаружил, что из-за position: relative; одного родительского элемента position: relative; моя nav не может убежать от этого. Я здесь симулирую это в jsfiddle jsfiddle.net/helisz/cRgEC/1
Проблема исправлена, посмотрите на правку :)