problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for.

I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I want the min-height to be 50% of the window height, which varies on different devices so setting it in px is not an option. If I use jquery.css() function within document.ready(), the page will start with zero height and then adjust to the specified height which doesn't look good on the website.

Case 1 : http://jsfiddle.net/pT56y/

FIDDLE EXAMPLE

case 2 : http://jsfiddle.net/pT56y/2/ Is there a proper way to deal with this issue?

javascriptjqueryhtmlcss

Answer №1

For a percentage height to work, the parent element needs to have a specified height (either in pixels or as a %):

body,html{
    height: 100%;
}
.container-fluid{
    background:#000000;
    width:100px;
    min-height:50%;    
}

Fiddle

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

Customized Grafana dashboard with scripted elements

I'm running into an issue while using grafana with graphite data. When I attempt to parse the data, I encounter an error due to the server not providing a JSON response. I am experimenting with scripted dashboards and utilizing the script found here: ...

javascriptjsongraphitegrafana

Is Vue.js rendering jQuery obsolete?

Is it true that utilizing vue js will render the jQuery library unnecessary for experienced developers? I would appreciate any insight on this matter. ...

jqueryvue.js

An easy way to activate the save button automatically

Is there a way to automatically enable the save button when a user checks the checkbox and enters text in the input field? I'm not sure what steps are needed or if there is an alternative approach to achieve this. jQuery("input[type='text&apos ...

javascriptjquery

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...

javascriptjqueryhtmlcssnavigationbar

Exploring the Interactive Possibilities of CSS3 with Background Tiles

I'm struggling to implement a flip effect where the content of a div changes, but I can't seem to prevent the text from disappearing after a few seconds. I've tried using backface-visibility:hidden with no luck! HTML <div class="cards" ...

htmlcsscss-transitions

Controlling the document object model of a third-party website within the Electron framework

I am completely new to electron. My main goal is to load a URL and then execute some Javascript that will make changes to the DOM. Currently, my approach involves creating a BrowserWindow that loads the URL, and I understand that I can utilize webContents ...

javascriptnode.jselectron

"Controller's $watch function fails to trigger when new items are added to an array within a directive

Within my code, I have established a two-way binding variable called publish.selected_tags that connects a directive with a controller. To monitor changes in this variable, I implemented a $watch function within my controller: $scope.$watch('publish ...

javascriptangularjsangularjs-directiveangularjs-watch

What is the best way to trigger the opening of a Component upon an onPress event?

One challenge I am facing is implementing a button in my app's Screen that should open a self-made Modal component on the same screen. To achieve this, I have set up a visible state in the screen and created an onPress handler for the button to toggl ...

javascriptandroidreactjsreact-native

Having difficulty adding a Dropdown Menu in a Pop-up Box

I am trying to incorporate a select menu inside of a popover, but every time I attempt to do so, the popover content block remains blank. The popover is associated with a side menu item called "Date History". Below is the code snippet I am using to constr ...

javascripthtmlbootstrap-4

Unwrapping nested objects in a JSON array with JavaScript: A step-by-step guide

After trying some code to flatten a JSON, I found that it flattened the entire object. However, my specific requirement is to only flatten the position property. Here is the JSON array I am working with: [{ amount:"1 teine med 110 mtr iletau" comment:"" ...

javascripttypescript

How to deactivate the mobile hardware back button functionality in Ionic 2

Our team has been developing a business application and we've encountered a perplexing issue. Every time we press the mobile hardware back button, our application's GUI becomes disrupted. Despite dedicating numerous hours to finding a solution, t ...

javascriptangularionic2

Ajax request returns a 500 error, yet the request successfully executes

I have set up an API controller to manage an ajax request. Each time the Ajax request is sent from the script below, I encounter a 500 error: POST http://localhost:58463/api/Reservations 500 (Internal Server Error) jquery-2.1.0.min.js:4 l.cors.a.crossDomai ...

javascriptasp.netajaxasp.net-mvcasp.net-mvc-4

The elements are out of sync and not properly aligned

Having trouble creating a navbar and encountering two issues. The search text bar's width is not 100%, it should fill the width to 100% of its column. The Glyphicons are not vertically aligned. For reference, you can check out this JSFiddle link A ...

jqueryhtmlcsstwitter-bootstrap

Unleashing the Power of RxJS with OR Conditions

I am working with two Observables. For instance, I am waiting for either an HTTP POST call or a WebSocket call to return so that I can proceed. Once either call returns, I need to verify the information until a certain condition is met. In the following e ...

javascriptangularrxjsrxjs6

Prop type failure: The `actions` prop is specified as mandatory in the `Testing` component, however, its value is currently undefined

I am working on a project that involves creating a login form using React and Redux. Here's a snippet of my app.js: import React from 'react'; import { render } from 'react-dom'; import Input from 'react-toolbox/lib/input&apo ...

javascriptreactjsreduxreact-redux

The behavior of placing an <a> element within an inline <li> element

I find the HTML / CSS result below to be quite puzzling and unexpected. I am eager to understand the reasoning behind how this is being interpreted. Consider: #nav { list-style-type-none } #nav li { display: inline; } /* make the LI's stack ho ...

htmlcssblockinline

Encountering difficulties when trying to set up popovers in Bootstrap

I'm currently working on enhancing an Angular application developed by someone else. My task involves adding a popover feature. The HTML code is located within an ng-include template and includes the following tag: <p class="filetracker-label" dat ...

jqueryangularjstwitter-bootstrap

Instantiate a child class within an abstract class by utilizing the keyword "this"

Within my code, there is an abstract class that uses new this(). Surprisingly, this action is not creating an instance of the abstract class itself but is generating an instance of the class that inherits from it. Even though this behavior is acceptable i ...

javascripttypescript

What is the best way to retrieve a date from within an array using jQuery?

Trying to extract a date value from a JSON object, but the date is nested inside an array. Sample code below fetch.php <?php include_once('connect.php'); $employee_id = $_POST['employee_id']; $query = "SELECT ...

phpjqueryajaxgetdate

Inline-block styling behaving incorrectly within span element

I am facing an issue with aligning a validation message inline with a textbox in my HTML code. Despite trying various options, the validation message appears just below the textbox instead of beside it. Below is the snippet of the code in question: HTML ...

csshtmltwitter-bootstraptwitter-bootstrap-3