Find the height of the viewport using jQuery, subtracting (n) pixels

Apologies if the topic seems puzzling, I couldn't find a better way to explain it. I utilized jQuery to adjust the height of a div to match the size of the viewport.

var slidevh = function() {
    var bheight = $(window).height();
    $(".container").css('height', bheight);
};
$(document).ready(slidevh);
$(window).resize(slidevh);

Currently, this method works well. However, I would like the height to be 100 pixels less than the viewport size. For instance, if the height is ​​500px, I want it to be 400px :)

Is there a more effective way to achieve this? Perhaps using pure CSS?

Answer №1

One option is to utilize the CSS calc function:

.wrapper {
   width: calc(100vw - 50px);
}

Alternatively, in jQuery JavaScript:

var adjustWidth = function() {
    var screenWidth = $(window).width();
    $(".container").css('width', screenWidth - 50);
};

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

Attempting to run driver.execute_script(gooogletag but no response was received

I have been attempting to receive responses in the console from the browser when running googletag parameters with Selenium, but unfortunately I have not been successful. Even after trying .execute_async_script('googletag.pubads()') and putting ...

Make sure the top edge of your Bootstrap 4 dropdown menu is perfectly aligned with the bottom edge of your

Trying to make a Bootstrap 4 navbar dropdown display right below the navigation bar, but it consistently shows slightly above the bottom edge of the navbar. Is there a way to make this happen without fixing the height of the navbar and using margin-top fo ...

Ways to retrieve information from a promise that has been rejected

Can someone provide me with detailed information on why a request failed, such as an existing username or email already in use? The console only displays a generic "Bad Request" error without specifics. I noticed that I can return a promise containing data ...

The navigation bar is showing my logo in a blurry and small format when viewed on a desktop

Currently, Twitter Bootstrap is being utilized on my website and a high-resolution logo has been successfully uploaded. The dimensions of the logo are 529 x 100 pixels, and here is the relevant CSS: .navbar-brand { float: left; padding: 12px 15p ...

What is the functionality of CSS radio tabs?

Can anyone provide a breakdown of how the final section of this code operates? Specifically: [type=radio]:checked { } [type=radio]:checked ~ .content { z-index: 1; } I am brand new to CSS and wanted to experiment with creating interactive CSS tabs, whi ...

Ensuring the Persistence of Column State in Material-UI DataGrid/DataGridPro when Adjusting Visibility Using Column Toolbar

We have integrated MUI DataGrid into our React project. Currently, I am exploring options to save the state of columns after toggling their visibility using the DataGrid toolbar column menu. After each re-render, the column setup returns to its default st ...

"Encountering the error message "Uncaught TypeError: $(...).summernote is not a function" while working with

I've encountered an issue while trying to implement summernote into my Angular app. I keep receiving the error message "$(...).summernote is not a function" and it seems like summernote is not loading properly on the page. I'm unsure of what step ...

Hide the 1, 2, 3 page buttons in Datatables pagination and instead display only the Next and Previous buttons for navigation

I recently implemented datadables.net pagination for my HTML table. I am looking to customize the pagination buttons by hiding or removing the 1, 2, 3 ... buttons and only display Next and Previous Buttons. Is there a way to achieve this by setting paging ...

Send a parameter to be used as a link attribute in a pop-up box

I am seeking a way to pass a URL for my modal that relies on extracting the adder variable from the main HTML document. While I understand how to pass variables as text (using spans) to a modal, I am unsure how to incorporate a variable in an anchor <a ...

Arrange array of objects with unspecified and non-existent values

Is there a way to sort an array of objects in JavaScript that contains null and undefined values? The goal is to display items with a "jobTitle" property first, sorted by rating, followed by items without a "jobTitle" also sorted by rating. Sample Data: d ...

Tips for altering value by selecting radio buttons

Currently, I am in the process of developing a website using Adobe Dreamweaver with php. The site includes three buttons that serve as payment method options and act as continue buttons. My goal is to have the selected radio button (I agree button) add a s ...

I can't seem to figure out why my attempts to set a cookie through Express are failing

I am currently facing an issue with sending a cookie back to my React app after logging in. In my server, I have set up a test response: res.status(200).cookie('nameOfCookie', 'cookieValue', { maxAge: 1000* 60 * 60 }).end(); In the app ...

What is the process for linking a specific HTML file to a URL?

After preparing all my HTML, CSS, and JS files for upload to a server (I am using cPanel which I have experience with), I found myself wondering how to assign a specific HTML file to a custom link, such as "devwebdevelopment.com/about" I am looking to cre ...

Beware, search for DomNode!

I attempted to create a select menu using material-ui and React const SelectLevelButton = forwardRef((props, ref) => { const [stateLevel, setStateLevel] = useState({ level: "Easy" }); const [stateMenu, setStateMenu] = useState({ isOpen ...

I'm struggling to understand how to properly utilize the "path" parameter in the app.use() function. The outcome it produces is not what I had anticipated

I am a beginner in express.js and I have been trying to understand how to properly use "path" in the app.use() function. However, when I execute the code as shown below, the result is not what I anticipated and it's quite confusing for me. Can you ple ...

I am eager to design a form input field within the vuetify framework

https://i.sstatic.net/zbCfI.png I'm having trouble creating a text field in Vuetify where the button and height are not behaving as expected. I've attempted to adjust the height multiple times without success. Although I have the necessary CSS, ...

The outcomes of JSON.stringify and JSON.parse can vary

I am facing an issue with using JSON.stringify to create a JSON string from an Object. After saving the string into a file, I attempt to read the file and use JSON.parse to retrieve the object again. However, it seems that the process is not working as exp ...

Display the div only when the time variable reaches zero

I want to display a div when the difference between the time imported from the database and the current time is 0. How can I achieve this? Here is the code snippet: while ($row = mysqli_fetch_array($result)) { echo "<div class='alert' id= ...

Bootstrap scrollspy feature experiencing malfunction

I am encountering an issue with scrollspy on Bootstrap version 5.1. Despite following the examples in the documentation (links provided below), I am unable to make it work; there are no visible changes when scrolling. My goal is for the corresponding link ...

Is there a way to superimpose multiple PNGs and ensure that each one is clickable within its designated area?

I am looking to implement a interactive image system for dynamically generated content. The image includes a background image and various grey-scale mask images. Background Image: https://i.sstatic.net/NWzQ1.jpg (source: goehler.dk) Masks: https://i.ss ...