Детская ширина отделения, превышающая parent' s ширина отделения

Детская ширина элемента превышает ширину своего родительского отделения. Я предполагаю, что это, должно быть, было вызвано, потому что я устанавливаю положение быть зафиксированным, но я не знаю, что заменить его. Это отделение - панель навигации, которая должна быть прикреплена к вершине окна. Когда я избавляюсь от position:fixed, размер пригоден родительскому отделению приятно. Однако военно-морской бар больше не прикрепляется к вершине. Как я решаю эту проблему?

reference: page

CSS:

.fixed_pos {
    position: fixed;
}

View:

<div class="container-fluid">
  <div class="row-fluid">
      <div class="span11 fixed_pos">
        
      </div>
  </div>
</div>

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

3
nl ja de
Необходимо добавить все CSS свойства для этих отделений, таким образом, мы видим, какова проблема может быть.
добавлено автор Spencer May, источник

2 ответы

Для фиксированного военно-морского вам обычно нужен он на внешнем большая часть слоя или в его собственном абсолютном отделении. Это довольно прямое. Вот скрипка для вас, чтобы посмотреть на и приспособиться. Все еще уверенный, что вы действительно пытающийся сделать со всеми теми отделениями, но это - основная установка, которая может быть легко адаптирована.

http://jsfiddle.net/hakarune/FMmEc/

HTML:

<div id="wrap">
   <div id="header">
        

CSS Newbie: Super Simple Horizontal Navigation Bar

    </div>

   <div id="content">
      
Basic Fixed Nav at Top </div> </div>

CSS

nav {
    width: 100%;
    float: left;
    margin: 0 0 15px 0;
    padding: 0px;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc; 
    position:fixed;
    top:0px;
}
nav li {float: left; }
nav li a {
    display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
nav li a:hover {
      color: #c00;
      background-color: #fff; }
   /* End navigation bar styling. */

   /* This is just styling for this specific page. */
body {
      background-color: #555; 
      font: small/1.3 Arial, Helvetica, sans-serif; }
#wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; }
h1 {
      font-size: 1.5em;
      padding: 1em 8px;
      color: #333;
      background-color: #069;
      margin: 30px auto 0;
}
#content {
      padding: 0 50px 50px; }​
4
добавлено
Это является самым близким к правильному ответу. Обратитесь к stackoverflow.com/questions/9350818/…
добавлено автор Maximus S, источник
спасибо за вашу помощь. Да, справочная страница работает отлично теперь, потому что я решил проблему. Решение отделяло военно-морской бар от главной контейнерной жидкости и давало его right:0, left:0, position:fixed . Это эффективно сократило всю ненужную прибыль и заставило военно-морской бар приятно соответствовать ко всему экрану.
добавлено автор Maximus S, источник
Я проверил вашу справочную страницу, и она похожа на it' s рабочий прекрасный, по крайней мере на моем конце. Кроме тех случаев, когда вы изменяете размеры браузера ниже 800... Это то, что вы хотели зафиксированный, ваш военно-морской бар от исчезновения в меньших размерах окна? (Также кнопка исчезает также...),
добавлено автор hakarune, источник
Я отредактировал скрипку, чтобы отразить жидкий стиль, который является динамичным. Добавление минуту-width:300px; это мешает ему быть измененным меньшее, чем длина, требуемая военно-морского бара.
добавлено автор hakarune, источник

Элементы фиксированной позиции помещены относительно viewport, не их содержания элементов (подробнее). Следующее могло бы работать:

<body>

    <!-- the stuff you have up here... -->

    <div class="container-fluid"
        style="
            position: fixed;
            left: 0;
            right: 0;
            padding-right: inherit;
            padding-left: inherit;">

        <div class="row-fluid" id="menus-desktop"><!-- MENUS DESKTOP -->

            <!-- set to span12 and removed fixed_pos class -->
            <div class="span12" style="position: relative;">
                <!-- ul, etc... -->
            </div>
        </div>
    </div>

    <!-- the previous container but without the nav stuff -->

</body>

I moved the nav elements into their own fixed container which is a direct child of the body with it's padding to inherit so it will adapt to whatever you set on the body. Then, the previously fixed element should no longer be fixed and is set to span12 so it goes the correct width.

0
добавлено
I' m пытающийся соответствовать моей военно-морской ширине отлично к жидкой рядом ширине. Я думаю, устанавливая position:fixed к любому жидкому элементу, сокращает его ширину, чтобы соответствовать содержанию внутри...
добавлено автор Maximus S, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)