What is the method for subtracting pixels from a percentage value?

Is there a way to accomplish a similar effect to this:

height: calc(100% - 50px); 
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);

In browsers that do not support these properties?

I have a responsive div with two children. The height of the first child is in pixels, and I want the second child to occupy the remaining space within the parent div. I was able to achieve this using calc(), but it does not work in all browsers. I would prefer not to use JavaScript. Any suggestions on how to address this issue?

javascriptjqueryhtmlcssresponsive-design

Answer №1

If your browser does not support the calc expression, you can easily replicate it using jQuery:

$('#yourEl').css('width', '100%').css('width', '-=50px');

If Calc is causing issues, let jQuery take care of it. :)

Answer №2

In case CSS is not functioning properly, you have the option to obtain the height of the parent element and then subtract the required amount from it.

let parentHeight = document.getElementById("parent").offsetHeight; //-- Retrieve the height of an element
document.getElementById("child").style.height = (parentHeight - 50) + 'px';

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

Troubleshooting a problem with a CSS dropdown menu

For the past couple of hours, I've been trying to troubleshoot the issue with the fly-out menu on the homepage of this website. When hovering over the capabilities link, the fly-out works correctly but the main background doesn't stretch to fit ...

css

working with received data from a JavaScript object

Looking for code assistance, I have a data object serving as my data source. var data = [ { "label":"May 7", "value":25736.6, "proID":"ISB" }, // more data objects... ]; I'm manipulating this data to generate another ...

javascriptjson

Click on a designated button to choose a specific file on an HTML page

I need to be able to select a specific file by clicking on another button. A helpful solution that utilizes JavaScript to trigger the selection of a hidden file can be found in this answer. You can view the implementation here. In my scenario, I alre ...

javascripthtmljquery

How to establish a session in CodeIgniter with the help of JavaScript

Currently, I am trying to save the session in jQuery. Specifically, I am attempting to store all the IDs that are checked via checkboxes in the export_type variable and then save them in the session. However, when running the following code snippet, I en ...

javascriptjquerycodeigniter

Material UI autocomplete is not detecting the options parameter as an array

I am currently working on implementing an autocomplete field that retrieves options from my component's state, which in turn fetches data from the backend. Here is a snippet of my component: export const Person: React.FC<PersonProps> = ({name, a ...

javascriptreactjstypescriptautocompletematerial-ui

Deactivate DropDownList within Update Panel with JQuery

Below is the Update Panel that I am working on: <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="d ...

javascriptjqueryasp.net

Ways to prevent animations from displaying solely in IE

Is there a way to remove a keyframe animation if the browser is IE, while keeping it for Chrome, Safari, and FireFox? The animation I am referring to is defined as follows: // Animations @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } ...

css

Transmit data via XMLHttpRequest in smaller portions or through a ReadableStream to minimize memory consumption when handling large datasets

Recently, I've been experimenting with JS's XMLHttpRequest Class for handling file uploads. Initially, I attempted to upload files using the following code: const file = thisFunctionReturnsAFileObject(); const request = new XMLHttpRequest(); req ...

javascripttypescriptxmlhttprequeststreaming

Discovering similar values between two attributes through jQuery

For the scenario outlined here, a variable is being used to load ajax content. var postname = itsname; The goal is to retrieve the value of data-slider by matching it with the data-postname attribute using jQuery. In this case, the desired result is 2 in ...

jqueryattributes

Is there a way to reference a background-image using "<img src>" syntax?

Why won't the background image display? It only displays as an img src. How can I call the background-image correctly? <body> <div id="page" style="background- image:url(https://storage.blob.core.windows.net/name/image.png)"> ...

html

The disadvantages of manipulating DOM in controllers in AngularJS

Many experts advise against performing DOM manipulations in AngularJS Controllers, but it can be challenging to fully understand why this is considered a best practice. While sources mention issues with testing and the primary purpose of controllers for di ...

javascriptangularjs

Do you mean using a JSON object as a value?

When creating a JSON object where the value itself is an object, what is the correct way to write it? var data ='{"phone":{"gtd": "080"}}'; OR var data ='{"phone":"{gtd: 080}"}'; This question may seem straightforward. I am curious ...

javascriptjqueryhtmljsonajax

PJAX malfunctioning

My pjax seems to be malfunctioning, as I notice that the time changes. Could you please review my code for any errors? <html><head> <script src="jquery.js"></script> <script src="jquery.cookie.js"></script> <script ...

phpjqueryruby-on-railsajaxpjax

Highlighting the home page in the navigation menu even when on a subroute such as blog/post in the next.js framework

After creating a navigation component in Next JS and framer-motion to emphasize the current page, I encountered an issue. The problem arises when navigating to a sub route like 'localhost:3000/blog/post', where the home tab remains highlighted i ...

javascriptreactjstypescriptnext.jsframer-motion

Request the generic password prior to revealing the concealed div

I want to implement a feature where a hidden div is shown once a user enters a password. The password doesn't need to be stored in a database, it can be something simple like 'testpass' for now. Currently, I have written some code using Java ...

javascripthtml

Assigning an argument of type `any` to a parameter of type `Observable<IComboboxItem[]>` can be considered risky

I have a piece of code that retrieves data from the backend server. Here is the code snippet: @Injectable() export class DictionariesDatasourceFacadeService { public invoiceTemplate: IDataSource<IComboboxItem>; public replacedLegalEntity: IData ...

javascriptangulartypescript

Error in Node.js: Attempting to access properties of undefined

RV = (typeof myresult.CDF.UTILITYTYPE.D2.INSTPARAM[0].VALUE !== 'undefined') ? myresult.CDF.UTILITYTYPE.D2.INSTPARAM[0].VALUE : 'NA'; When attempting to fetch the value from the code above, I encounter an issue. If the key does not exi ...

javascriptnode.jsexpress

Populate the browser screen with a series of unpredictable numbers

I'm looking to fully populate the visible window of a webpage with random numbers. My current approach involves generating a long string of random digits first, and then applying the following properties to a div: #mydiv{ font-family: "Inconso ...

javascriptcss

Combining data inputted into a remote/modal bootstrap form and submitting it alongside the parent page form

I am trying to create a parent bootstrap page with a form that includes a dynamic modal. The modal loads an external page containing form elements and a submit button that is supposed to submit the form on the parent page. However, when I click the submit ...

jqueryajaxtwitter-bootstrapmodal-dialog

Navigating to an AngularJS state through an email hyperlink

Trying to guide users from an email link to a specific state within my Angular app presents a challenge due to its single page nature, making direct URL redirection impossible. Past attempts involved utilizing URL parameters: The email includes this link ...

javascriptangularjsemailhttp-redirect