Vertical stacks of DIVs suddenly vanish

I am currently creating a map grid using HTML/CSS with the following layout:

#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>

For this case, it's a map comprising of 10 rows and, you will notice that the total height adds up to 100% of the parent element.

The only styling applied is setting both map-row and map-row-split to have a width=100%, however, one of the split divs seems to be hidden for some reason:

https://i.sstatic.net/yxBwZ.png

The disappearance of certain split divs (and how many disappear) varies based on the size of the parent container, such as in the case below where the parent is smaller:

https://i.sstatic.net/EgdNg.png

htmlcss

Answer №1

Response derived from comment

Make sure to apply min-height: 1px to the CSS class .map-row-split. Avoid setting height to a fraction of a pixel as this could potentially cause visual problems or inconsistencies in various browsers.

Answer №2

To make sure your webpage takes up the full height of the screen, set both the html and body elements to have a height of 100%.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Black screen issue with JW Player on iPad

I am currently using the JW Player to embed my videos and facing an issue with them not playing on iPads or iPhones. It seems like a problem with the HTML5 video tag as the screen remains black when trying to play the videos. Below is the code snippet for ...

phpjavascripthtmljwplayer

Is it possible for Bootstrap to hide a grid column on extra small screens by setting its column width to zero?

Is there a specific Bootstrap class that allows me to hide a grid column for certain screen sizes without using media queries and the "display:none" style? ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

Another query has arisen about the html5 dtd/schema

How can we validate HTML5 documents for syntax accuracy and structural soundness if there is no DTD or schema? It's crucial for our industry to have a reliable method of ensuring validity. The W3C's online validation tool is helpful for individua ...

htmlschemadtd

Giving identification to a pair of elements located within the same column

Struggling with assigning IDs to two elements in a single column - a dropdown and a text element. Managed it in the first scenario, but encountering issues in the second one. Seeking assistance on this matter. Scenario 1: <td> <sele ...

javascriptjqueryhtmlcss

Crafting visually stunning interfaces with Material UI

I'm a beginner in Material Design and I could use some assistance with the following structure. Can anyone guide me on how to create this? https://i.stack.imgur.com/NpiVz.png I've managed to add a text box, but now I'd like to place a label ...

cssreactjsmaterial-ui

Using HTML to execute a JavaScript function that transforms images

The script cutImageUp has been previously discussed on SE in a thread about Shattering image using canvas. However, I have encountered a different issue while attempting to use it. The HTML code I implemented seems to be ineffective, and despite my efforts ...

javascripthtml

Using regex in javascript to strip HTML tags

I'm trying to clean up my document by removing all HTML tags except for <a>, <img>, and <iframe> using the following code: var regex = "<(?!a )(?!img )(?!iframe )([\s\S]*?)>"; var temp; while (source.match(regex)) { ...

javascripthtmlregex

Managing Events for a Menu Item That Cannot Be Selected

As I work on developing a form using Material UI React, my focus is on logging exercise sets to the database. To allow users to select the exercise they wish to log, I have incorporated a list of Material UI Menu Item components as options. Additionally, I ...

htmlreactjsmaterial-ui

What is the best way to trigger two separate JavaScript/jQuery functions on a single HTML control, specifically a text field, in response to

Here is the HTML code I have for a text field where functions are implemented: <input type="text" class="form-control" size="20" onblur="GetLocation();" id="zip_code" name="zip_code" value=""> <input type="text" class="form-control" size="20" r ...

javascriptjqueryhtmlfunction

How can I incorporate random variables and functions into an if-else function when using Jquery to make #divId droppable?

I have most of my code working as I want it to, except for some basic CSS adjustments that need to be made. In a specific part of my code where I am using $("#divId").droppable({over: function(), I want to add 2 other functions and have one of them execute ...

jqueryhtml

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

javascriptjqueryhtmlcssjquery-ui

What is the reason for the .foo a:link, .foo a:visited {} selector taking precedence over the a:hover, a:active {} selector in CSS?

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { ...

csscss-selectors

How can we improve our vertical division method?

Looking for a more efficient way to create a vertical divider between two divs. I want the divider to be centered between the "why choose" and "gallery" sections. Here is an example of what I'm trying to achieve. I've attempted the following co ...

htmlcss

Conceal a list of items within a div that has a particular class

This is a sample of my HTML code: <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flut ...

javascriptjqueryhtmlcss

When I click on my div, the color does not change as expected

Recently, I wrote a code snippet where there are 9 different div elements each assigned a ".spaces" class. The intention was to change the color of these divs upon clicking on them. However, I encountered an issue where only the first div changes its color ...

javascripthtmldomdom-events

Delete an entry from the localStorage

I am attempting to create a basic To-Do list using jQuery, but I have encountered an issue. This is my first time utilizing localStorage. After setting up the structure for my To-Do list, I wanted the items to remain visible when I refresh the page. Initia ...

javascriptjqueryhtmllocal-storage

Unleashing the power of specific dates with the angularJS datepicker directive

I am looking to develop a custom Datepicker directive using Angular JS, with the requirement of allowing only specific dates for selection by the user. For instance, I have a predefined list of numbers such as 1,3,5,7, and my goal is to make these particu ...

angularjshtmldatepickerangular-ui-bootstrap

Connect ngx-time picker to form input in Angular

Currently, I have successfully implemented Angular material date pickers in my project, however, I am facing a challenge with integrating time pickers as it is not natively supported by Angular Material for version 8. To address this issue, I am utilizing ...

htmlangulartypescriptangular-material

The Card Component from Core UI fails to appear in the Print Preview feature

I'm currently experimenting with the Card Component from the Core UI framework. However, I'm facing an issue where the color of the Card component and its associated icon do not appear in the Preview when trying to print the page. I attempted to ...

cssvue.jscore-ui

The Webix component is experiencing a lack of refreshment

function refresh_group_items(){ //console.log("calling1"); window.setTimeout(function(){ $$("cfg").reconstruct() }, 3000); } $.ajax({ type: "POST", xhrFields:{ withCredentials: true }, beforeSend: function(reque ...

javascripthtmlajaxwebix