Вложенные абсолютные переливы - PullRequest
Новая
       63

Вложенные абсолютные переливы

0 голосов
/ 27 октября 2019

Высота 100% не применяется к дочернему элементу, когда position: absolute вызывает вертикальное переполнение с помощью HTML-макета ниже. Проблема, вероятно, вызвана тем, что увеличение высоты, вызванное вертикальным переполнением, не применяется к дочерним элементам элемента body . 

:root {
  --abs-container-height: 80px;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.top-bar {
  height: var(--abs-container-height);
  display: flex;
}

.abs-content-trigger {
  position: relative;
}

.abs-content {
  top: 100%;
  
  display: none;
  position: absolute;
}

.abs-content-trigger.show > .abs-content,
.abs-content-trigger:hover > .abs-content {
  
  display: block;
}

.content-container {
  max-height: calc(100% - var(--abs-container-height));
  overflow: auto;
}

/* Only visual styling. The css below can be disregarded */
/* Only visual styling. The css below can be disregarded */
/* Only visual styling. The css below can be disregarded */

body {
  background: #DFD;
}

.top-bar {
  background: red;
}

.abs-content-trigger {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.2);
  height: 100%;
  margin-right: 5px;
  min-width: 100px;
}

.content-container {
  background: #ddf;
}
<html>
  <body>
    <div class="top-bar">
    
      <div class="abs-content-trigger">
        Hover Me
        <div class="abs-content">
          
          <div style="height: 110vh; background: #ccc">
            Some random content.
          </div>
       
       </div>
      </div>
      
      <div class="abs-content-trigger">
        Hover Me 2
        <div class="abs-content">
          
          <div style="height: 110vh; background: #ccc">
            Some random content 2.
          </div>
       
       </div>
      </div>
      
    </div>
    
   <div class="content-container">
       Height 100% does not apply correctly to this element when one of
       the "Hover Me" buttons is hovered. If neither button is hovered, then
       the height is applied correctly.
       <div style="height: 1000px; ">
       
       </div>
   
   </div>
    
  </body>
</html>

Если ни одна из кнопок не наведена, то макет отображает , как и ожидалось , а цвет фона тела не виден: Ожидаемое поведение

Однако при наведении любой кнопки макет меняется, и после прокрутки до дна рендеринг неожиданный , поскольку внутренний элемент прокрутки не заполняет своего родителя: Неожиданный рендеринг после зависания и прокрутки

Макет, который я ожидаю , получит: Рендеринг, который я хочу получить (отредактировано с помощью графической программы)

Обратите внимание, что решение не должно использовать JavaScript , но в противном случае любые взломы CSS или HTML являются жизнеспособными. HTML и CSS предпочтительно должны работать в IE11, но не обязательно.

Тот же код HTML и CSS в JsFiddle: https://jsfiddle.net/LexLocked/xyfrLpzs/44/

...