Установите абсолютно позиционированное DIV * полностью * в относительно позиционированном исходном DIV?

Я хочу использовать CSS (не JavaScript), чтобы соответствовать ребенку DIV с позиции: абсолютнойТОЧНО в его положения: относительный родителя. Это ТОЧНАЯ часть, это проблема.Установите абсолютно позиционированное DIV * полностью * в относительно позиционированном исходном DIV?

Как показано на следующем рисунке, ребенок DIVs подходят очень красиво внутри родителя левый/правый и верхние края Див, но переполняться родителю нижний край Div путем (что, кажется) 1px.

Ключевым моментом является то, что я пробовал различные комбинации ВЫСОТА для ребенка DIV. Этот подход на самом деле не устраняет проблему, поскольку изменение размера страницы приводит к тому, что нижний край дочернего DIV по отношению к родительскому элементу. Поэтому я не считаю, что исправление заключается в изменении значения HEIGHT.

Это CSS:

div.container{ 
    position: relative; 
    background-color: #fafafa; 
    margin: 2%; 
    border: solid 2px orange; 
    padding: 2%; 
    height: 100%; /* Expands container to height of HTML & BODY */ 
} 

div.leftSideNav, 
div.rightSideNav 
{ 
    height: 100%; */ Changing height doesn't seem to truly fix the problem */ 
    width: 1.5%; 
    background-color: #ccffcc; 
    margin: 0px; 
    border: solid 1px #33bb88; 
    padding: 0px; 
    position: absolute; 
    top: 0px; 
    color: #333333; 
} 

div.leftSideNav{ 
    left: 0px; 
    background-color: pink; 
} 
div.rightSideNav{ 
    right: 0px; 
}

Вот соответствующий XHMTL:

<body> 
    <div class="container"> 
    <div class="leftSideNav" /> 
    <div class="rightSideNav" /> 
    </div> 
</body>

Я ушел «по кругу экспериментируют и пытаются получить ребенка дивы» нижние края, чтобы поместиться внутри их родителями являются верхние/левые/правые поля. Я нашел много общих обсуждений, но никто из них конкретно не упоминает, как получить нижний край дочерних DIV внутри родителя.

источник

2016-05-23 RBV

Удалить height:100%;

и добавить

top:0px; 
bottom:0px;

и все вы все.Совместим с полным кросс-браузером

источник

2016-05-23 23:52:57 Kinggeov

Работает отлично. Любовь, как просто, когда человек знает «трюк» ... – RBV

Ваши абсолютно позиционированные дети имеют 1px границу вокруг них:

border: solid 1px #33bb88;

Это является источником переполнения.

height:100% + 1px + 1px = 2px overflow

Вы можете использовать функцию CSS calc(), чтобы элементы подходят именно:

height: calc(100% - 2px);

ИЛИ

Отрегулируйте CSS Box Model включить отступы и границы в расчетах ширины/высоты. По умолчанию box-sizing: content-box. Вместо этого попробуйте box-sizing: border-box.

div.leftSideNav, 
div.rightSideNav 
{ 
    height: calc(100% - 2px); /* OPTION #1 */ 
    box-sizing: border-box;  /* OPTION #2 */ 
    width: 1.5%; 
    background-color: #ccffcc; 
    margin: 0px; 
    border: solid 1px #33bb88; 
    padding: 0px; 
    position: absolute; 
    top: 0px; 
    color: #333333; 

}

Ссылки:

источник

2016-05-23 23:43:53

Вот [JSFiddle] (https://jsfiddle.net/ydo1j3hu/1/) в подтвердите, что это исправляет это! – 4castle

Лучшая скрипка: https://jsfiddle.net/ydo1j3hu/2/ (исправлено несколько ошибок: узлы 'div' и плохой комментарий в css) – Aloso

Добавление свойства выбора размера ячейки позволит решить вашу проблему.

HTML:

<div class="container"> 
    <div class="leftSideNav"> 
     <a class="arrow" href="#"><i class="fa fa-arrow-left"></i></a> 
    </div> 
    <div class="rightSideNav"> 
     <a class="arrow" href="#"><i class="fa fa-arrow-right"></i></a> 
    </div> 
</div>

и CSS:

div.container { 
     position: relative; 
     background-color: #fafafa; 
     margin: 2%; 
     border: solid 2px orange; 
     padding: 2%; 
     height: 100px/* Expands container to height of HTML & BODY */ 
} 

div.leftSideNav, 
div.rightSideNav { 
      height: 100%; */ Changing height doesn't seem to truly fix the problem */ 
      background-color: #ccffcc; 
      margin: 0px; 
      border: solid 1px #33bb88; 
      padding: 0px; 
      position: absolute; 
      top: 0px; 
      color: #333333; 
      box-sizing: border-box; 
      vertical-align: middle; 
      width: 25px; 
} 
div.leftSideNav { 
      left: 0px; 
      background-color: pink; 
} 
div.rightSideNav { 
      right: 0px; 
} 
.arrow { 
      font-size: 25px; 
      color: #999; 
      width: 25px; 
      position: absolute; 
      top: 50%; 
      margin-top: -10px; 
} 
div.leftSideNav:hover .arrow, 
div.rightSideNav:hover .arrow { 
      color: #333; 
}

Нажмите here для Demo

источник

2016-05-24 01:55:06

Установите абсолютно позиционированное DIV * полностью * в относительно позиционированном исходном DIV?

ответ

Смежные вопросы