Родитель меньшей высоты, чем дочерний элемент

Я пытаюсь сделать что-то похожее на боковое меню на this website. В настоящее время у меня возникает проблема с высотой элемента #parent list, так как я бы хотел, чтобы он был точно такой же высоты, что и его содержимое (пробел #child - см. Это jsfiddle).Родитель меньшей высоты, чем дочерний элемент

<body> 
<article class="full-height row"> 
    <nav id="nav-container" class="full-height row col-sm-3"> 
     <div class="col-sm-4 full-height"></div> 
     <ul id="nav-button" class="col-sm-8 full-height vcenter"> 
      <li class="vcentered active"><span class="fontastic">0</span></li> 
     </ul> 
     <ul id="nav-navbar" class="col-sm-8 full-height display-none"> 
      <li>Projects</li> 
      <li>Passions</li> 
      <li>Close</li> 
     </ul> 
    </nav> 
    <section> 
    </section> 
    <canvas class="full-height"></canvas> 
</article></body>

#child элемент не имеет каких-либо позиционирование CSS указанного, а также не имеет Z-индекс или поплавок свойства, следовательно, она не должна быть удалена из его контекста. Я не понимаю, почему элемент #child выше, чем его #parent.

Это было выполнено под Chrome 39.0.2171.95 м

Спасибо за ваши ответы!

источник

2015-01-11 Philippe Hebert

Можете ли вы создать jsfiddle? – CMPS

У вас есть runnable snippet (nice), но он ничего не работает. Ничего не видно. – GolezTrol

CMPS: jsfiddle created. Теперь вопрос проще и короче. GolezTrol: Решенный, см. Скрипку. –

Live demo

Причина для ребенка, чтобы быть выше, чем родитель, что класс шрифта fontastic имеет line-height = 1. Другими словами, ребенок говорит родителям, что моя высота линии равна 1, но на самом деле это больше. Чтобы исправить это, вы можете установить line-height = 1.2

источник

2015-01-11 21:20:44 CMPS

Спасибо, он определенно решил! –

@PhilippeHebert Добро пожаловать :) – CMPS

<span> бирка внутри <li> бирка. Ваша озабоченность связана с высотой, которая на самом деле связана с размером шрифта текста, который равен 64px.. Что касается вопроса о расстоянии между <li> и его содержимым, это минимальное расстояние по умолчанию между <li> и его содержимым. В вашем коде нет проблем. Я попытался и потратил полчаса на ваш код, но не смог уменьшить интервал по умолчанию. Надеюсь, это понятно.

EDIT:

Я не вижу ничего в jsfiddle поэтому я создал HTML в Dreamweaver и выход в Firefox и я не вижу, что вы говорите, что span больше font-size Вы можете увидеть на изображении ниже

<code>span border</code> is red and <code>li border</code> is blue and <code>0</code> is at its <code>font size</code> that is <code>64px</code>

источник

2015-01-11 20:13:43

См. Jsfiddle, который я добавил, ли менее высок, чем символ в элементе span. –

см. Отредактированный ответ выше. Я установил границу span и li в сплошной с красным и синим цветом соответственно –

Видовой экран просто слишком мал в jsfiddle. Вам нужно увеличить размер окна результатов, чтобы отобразилось меню (@media (min-size = 768px)). –

Вашего span имеет границу 1 рх, что родитель li улавливает в его расчете высоты. В моем случае span имеет высоту 73px (размер содержимого «0» с шрифтом), а li имеет высоту 74px (содержимое диапазона + граница диапазона).

источник

2015-01-11 20:20:22

В jsfiddle, который теперь предоставляется в OP, высота li составляет 64px, тогда как диапазон составляет 73px. Следовательно, диапазон выше, чем li, а не наоборот. –

Родитель меньшей высоты, чем дочерний элемент

ответ

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