Див растягивается только в одном направлении

Question

Я создал страницу документа, используя Flare, и заставил панировочные сухари оставаться фиксированными под верхней панелью навигации. Страница работает как есть, но я хочу, чтобы div растягивался по всей странице. Пожалуйста, смотрите текущий дизайн ниже:

Нажмите, чтобы увидеть пример скриншота

Я могу растянуть div до 100%, если уберу min-width у ребенка div, но он тянется только вправо, сохраняя при этом хлебные крошки там, где я хочу. Пример ниже:

Нажмите, чтобы увидеть пример скриншота

Или я могу растянуть его на 100%, добавив left:0; на родительском div, но затем крошки сдвигаются. Я могу использовать margin-right или right, чтобы расположить div в желаемых областях, но div не синхронизируется с остальным содержимым при изменении размера браузера.

Answer 1

Применил свойство css " left ", если этот div имеет "абсолютную" позицию.

Answer 2

Спасибо за ваши ответы. Вот HTML и CSS:

Html:

<div class="crumbs_wrapper">
 <div class="MCBreadcrumbsBox" >
  <span class="MCBreadcrumbsPrefix">You are here:</span>
  <a href="" class="MCBreadcrumbsLink">B1</a>
  <span class="MCBreadcrumbsDivider"> B2 </span>
  <a  href=""class="MCBreadcrumbsLink">B3</a>...
 </div>
</div>

CSS:

div.crumbs_wrapper
{  
 position: fixed;
    float: none;
    width: 100%;
    z-index: 1;
}

div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
    padding-top: 18px !important;
    padding-left: 10px !important;
    float: left;
    position: relative;
    margin-top: -12px;
    background-color: #FFF;
    z-index: 999;
    width: 100%;
    max-width: 104.5em;
    box-shadow: 1.5px 1.5px 15px #888888;
}

Я использую инструмент Flare, который не имеет фиксированной функции хлебных крошек. Панировочные сухари генерируются автоматически; Я только изменил значения CSS и добавил дополнительный div с .crumbs_wrapper учебный класс. Другие классы автоматически генерируются программным обеспечением.

Если я удалю max-width Div только тянется вправо, и если я добавлю left: 0; до родительского div, хлебные крошки перемещаются влево. Я могу привести крошки в положение, где я хочу использовать margin, но он не остается фиксированным при изменении размера браузера. Кроме того, paddings и margin-top используются, чтобы держать панировочные сухари ниже верхней навигации и выравниваться с остальным содержимым.

Answer 3

Попробуй это:

*{ 
  padding:10px;
}
.parent {
  margin:auto;
  width:300px;
  background-color:red;
}
.breadcrums {
  background-color:blue;
}
.full-width {
  background-color: green;
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
}

<div class="parent">
    <div class="breadcrums">breadcrums</div>
    <div class="full-width">full-width element</div>
</div>

Важной частью здесь является position, width, left а также transform на .full-width,