Как сделать так, чтобы фиксированная позиция div наследовала ширину гибкого родительского элемента? - PullRequest
Новая
       31

Как сделать так, чтобы фиксированная позиция div наследовала ширину гибкого родительского элемента?

0 голосов
/ 22 мая 2018

У меня есть установка с двумя div-файлами размера flexbox, внутри одного из которых у меня есть заголовок, который установлен в фиксированное положение.Как бы я сделал так, чтобы его ширина составляла 100% от родительского?Он должен оставаться внутри родителя независимо от его ширины.Спасибо. 

.block1 {
  height: 102.5%;
  margin: 0px;
  padding: 0px;
  flex-basis: 35%;
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  overflow: scroll;
  background-color: white;
  outline: solid red 1px;
}

.block2 {
  outline: solid red 1px;
  height: 102.5%;
  margin: 0px;
  padding: 0px;
  flex-basis: 65%;
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  overflow: scroll;
  background-color: white;
}

.header {
  position: fixed;
  background-color: red;
  width: 100%;
  z-index: 2;
}

.container {
  width: 100%;
  height: 70%;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  margin: 0px;
  outline: solid blue 1px;
}
<div class="container">

  <div class="block1">
    <div style="height:200px;">
      <div class="header">ff</div>
      <div style="height:500px;">
        ff
      </div>
    </div>
  </div>
  <div class="block2">
    <div style="height:200px;">
      ff

    </div>
  </div>
</div>

https://jsfiddle.net/nurqcq3e/

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Вам необходимо создать новый содержащий блок для элемента position: fixed.По умолчанию использование position: fixed вытягивает этот элемент из потока документов и позиционирует его относительно исходного содержащего блока, установленного в области просмотра (т. Е. <body>). MDN имеет большой обзор этого свойства :

Элемент удален из обычного потока документов, и для элемента в макете страницы не создано места.Он позиционируется относительно исходного содержащего блока, установленного в области просмотра, за исключением случаев, когда один из его предков имеет свойство transform, перспектива или фильтр, для которого установлено значение, отличное от none (см. Спецификацию CSS-преобразований), в этом случае этот предок ведет себя каксодержащий блок.(Обратите внимание, что существуют несоответствия браузера с перспективой и фильтром, способствующие формированию блока.) Его конечная позиция определяется значениями top, right, bottom и left.

Это значение всегда создает новый контекст стека,В печатных документах элемент размещается в одной и той же позиции на каждой странице.

Я пошел дальше и обновил фрагмент кода, чтобы проиллюстрировать: 

.block1 {
  height: 102.5%;
  margin: 0px;
  padding: 0px;
  flex-basis: 35%;
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  overflow: scroll;
  background-color: white;
  outline: solid red 1px;
  /* Necessary to become containing block for position: fixed child */
  transform: translate3d(0, 0, 0);
}

.block2 {
  outline: solid red 1px;
  height: 102.5%;
  margin: 0px;
  padding: 0px;
  flex-basis: 65%;
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  overflow: scroll;
  background-color: white;
}

.header {
  position: fixed;
  background-color: red;
  width: 100%;
  z-index: 2;
}

.container {
  width: 100%;
  height: 70%;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  margin: 0px;
  outline: solid blue 1px;
}
<div class="container">

  <div class="block1">
    <div style="height:200px;">
      <div class="header">ff</div>
      <div style="height:500px;">
        ff
      </div>
    </div>
  </div>
  <div class="block2">
    <div style="height:200px;">
      ff

    </div>
  </div>
</div>
0 голосов
/ 22 мая 2018

Попробуйте изменить положение с «относительного» на «абсолютный» для класса «заголовка».Если это не поможет, можете ли вы предоставить какой-нибудь макет?

...