контроль ширины элементов фиксированного положения с шириной: 100%

Question

контроль ширины элементов фиксированного положения с шириной: 100%

0

Я борюсь с двумя непослушными элементами - навигационным меню и фоновой панелью (отдельно для решения проблемы непрозрачности). Их позиции фиксированы, поэтому они остаются видимыми во время свитка. Их ширина, которая должна имитировать их родительскую, установлена на 100%. К сожалению, когда окно растянуто достаточно узко, их ширина распространяется за пределы родителя.

Это диаграмма html:

<html>
<body>
  <content>
    <nav-bar>
    <nav-menu>
    ...
  </content>
</body>
</html>

Показ должен быть проще, чем описывать, поэтому здесь ссылка на страницу: http://www.seanoneill.us/test/index.html

Когда браузер растягивается за максимальную ширину контента, все выглядит отлично. Когда браузер становится узким, правый конец навигационной панели и nav -menu выходит за пределы ширины содержимого. В других суслах правый край "Контакт" должен быть вставлен с правого края содержимого div на 20 пикселей отложения. Лучший способ увидеть это - прокрутить вниз большой, чтобы меню отображало изображение, а полупрозрачная навигационная панель видна. Затем растяните браузер до максимальной ширины содержимого и покачивайте его назад и вперед по этому пороговому значению.

Может ли кто-нибудь сказать мне, как сохранить навигационную панель и -menu внутри содержимого div?

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

Спасибо за прочтение.

user2781900 18 сен. 2013, в 22:25

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Chris Rockwell · Answer 1 · 2013-09-18T17-48-00.000Z

У вас есть content { min-width:700px }, и ваш nav плавает вправо, он останется там.

Если вы можете удалить min-width она исправит себя, или вы можете переместить .nav-manu вне контейнера .content и, если вы не завернете его чем-то другим, у которого есть min-width, он будет соблюдать ширину тела/окна

Привет, Крис. Спасибо. Я хотел бы всегда держать правый конец <ul> выровненным с правой стороны изображений. Когда я удаляю минимальную ширину, <ul> прилипает к краю окна и теряет выравнивание с изображением.
Вы что-то изменили с момента вашего комментария? Навигация остается в том же положении по отношению к изображению, как я его сейчас вижу. У вас все еще есть минимальная ширина тела. Попробуйте разделить ваши li с% или использовать медиа-запросы, чтобы предотвратить их переход на другую строку, когда экран становится таким узким.