некоторые вертикально сложенные DIVs становятся невидимыми

-1

Я строй своего рода карта сетки в HTML/CSS со следующей структурой:некоторые вертикально сложенные DIVs становятся невидимыми

#map { 
 
    position: absolute; 
 
    top: 2vw; 
 
    bottom: 2vw; 
 
    left: 2vw; 
 
    right: 2vw; 
 
    overflow: visible; 
 
    background : blue; 
 
} 
 

 
.map-row { 
 
    width: 100%; 
 
    background: white; 
 
} 
 

 
.map-row-split { 
 
    
 
}

<div id="map"> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
    <div class="map-row" style="height:9.8%;"></div> 
 
    <div class="map-row-split" style="height:0.2%"></div> 
 
</div>

В этом случае, это карта с 10 рядов и, как вы видите, общая высота составляет 100% от родителя.

только стиль, что оба map-row и map-row-split имеют width=100%, но результат скрывает один из расщепленных дивы по какой-то причине:

Какой раскол дивы исчезают (и сколько) зависит от размер родителя, например, это меньше, родительский размер:

источник

2016-10-10 jovan

Можете ли вы создать SO Snippet с кодом? – Justinas

@ Justinas Извините, но как мне это сделать? Я не вижу вариант где угодно. – jovan

Это значок в панели инструментов редактора рядом с изображением и имеет '<>' на нем – Justinas

Ответ от комментария

Набор min-height: 1px к .map-row-split, как установка высоты на доли пикселя может привести к некоторым визуальных несогласованности/проблем со стороны браузера.

источник

2016-10-10 13:33:50 Justinas

Просто установите высота html и body до 100%.

источник

2016-10-10 11:43:38

Что это значит? Там уже есть обертка div (см. Фрагмент). – jovan

Ну, это было до того, как вы добавили их в div. Однако я все равно дам вам объяснение. Вы использовали%, чтобы установить высоту, которая фактически зависит от высоты родителя. И высота html, и тело размером с содержимое внутри него. Таким образом, вам необходимо установить высоту html и body на 100% от документа. Вы можете или не могли столкнуться с этой ситуацией, если бы вы установили фоновое изображение, и даже если вы установили no-repeat, изображение все равно будет испорчено, где-то внизу документа. –

некоторые вертикально сложенные DIVs становятся невидимыми

ответ

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