Unable to display the full height of the browser

Having trouble achieving full browser height with my jQuery code. Check out this link for more information --

Below is the snippet of my HTML code:


      <div class="container contentContainer">
            <div class="row">
                <div class="col-md-6 col-md-offset-3" id="topRow">
                    <h1>Get Work. Done</h1>
                </div>
            </div>
        </div> 

CSS used in my code:


  .contentContainer
    {
        background-image:url('laptop1.jpg');
        height:400px;
        width:100%;
        background-size:cover;
    }

And here's the jQuery script I am using:


    <script>
        $(".contentContainer").css("height",$(window).height());
   </script>

I am utilizing jQuery version 1.11.2 min.

Answer №1

Activate jQuery now! jsfiddle.net/ntmd7c31

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script‌​>

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

Tips for arranging elements in proper order following a rotation

Having trouble aligning rotated divs? Let's say we rotate .straight by 30deg, and now we want to find the new offset coordinates of its bottom right corner. This way, we can perfectly match up the bottom left corners of .curve with this new coordinate ...

How come the last word in CSS nested flexbox wraps even though there is space available?

I am facing an issue with a nested flex container setup. Below is the code snippet: <div class="parent-container"> <div class="child-container"> <span class="color-block"></span> <span>T ...

The MUI Grid design features information displayed on the left side, accompanied by an image placed directly to the right

In the React MUI V5 sample code below, I am creating a profile page layout with details of a person displayed on the left side of the page in label/value format. My question is how to position an "IMAGE" entry (assume it's a 300px x 300px profile ima ...

Ensure that both the div element and its contents are restricted to a maximum width of

I'm having trouble arranging the display of information next to a plant image. I want to ensure that the information stays on the right side of the image when the screen reaches a specific minimum width. The issue arises when the information includes ...

Creating a personalized navbar design using Bootstrap

I'm attempting to build a navbar using bootstrap 4: However, I am uncertain of how to achieve this :/, can anyone offer any advice?! I am specifically interested in the lines on the left and right of the navbar, as well as the image centered in the m ...

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

Executing a snippet of Bootstrap 5 code under specific circumstances

I need to execute different code blocks based on the window width. When the width is 500px or more, I want to run a specific block of code, and when it's 499px or less, I need another block of code to run. How can I achieve this? For widths of 500px ...

Adjust tool tip text on the fly

As a beginner, I created a test table and now I want to make the tool tip text change dynamically when I hover over the table with my mouse. Ideally, I would like the tool tip text to correspond to the content of the table cell. Currently, I only have stat ...

Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. https://i.sstatic.net/H6CTF.png Here is the SVG code: <?xml version="1.0" e ...

The button designed to execute JavaScript and modify CSS is malfunctioning

I am trying to use a button to expand my sidenav by toggling the class with JQuery. Although I am more familiar with JavaScript, I attempted to solve it with JS before moving to JQuery. function toggleMenu() { var sideEle = document.getElementByI ...

Text obstructed by a sticky sidebar in Bootstrap

Currently, I am utilizing bootstrap to create a webpage featuring an affixed sidebar. However, I have encountered two issues when adjusting the screen size to that of a phone: The sidebar obstructs the text behind it, halting its movement beneath the sid ...

My image is being cropped on larger screens due to the background-size: cover property

I am currently in the process of designing a website with a layout consisting of a Header, Content, and Footer all set at 100% width. To achieve a background image that fills the screen in the content section, I utilized CSS3 with background-size:cover pr ...

The reset css code appears to be overridden by the user agent stylesheet

I've been developing a project using Next.js. I attempted to reset the CSS in my _app.tsx file and here is my _app.tsx code: import type { AppProps } from 'next/app' import GlobalStyles from '@/styles/GlobalStyles' export defa ...

Adjust the div's width dynamically based on its content

I've spent a lot of time reading through the questions and answers on this site, but I still can't figure out why my container won't allow horizontal scrolling for my smaller divs. CSS #theLoopTasksLabels { width:90%; height:90px; ...

Ensure that the width of the inner table matches the width of its contents within an overflowing div

I'm facing an issue with a table inside a div styled as table-wrapper: .table-wrapper { display: inline-block; overflow-x: scroll; width: 800px; } Although I want the div to display a horizontal scrollbar so that the table inside it can ...

Slow CSS :hover animations in the most recent release of Chrome

I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on ...

Having trouble with the tooltip not showing up on the fontawesome icon button?

I am experiencing an issue where the tooltip is not appearing for a fontawesome icon nested inside a element. <i class="fa fa-random" title="some tooltip"></i> Here is the CSS style being applied: i.fa { display: inline-block; } ...

What is the best way to incorporate a dropdown menu into existing code without causing any disruption?

I've come across this question multiple times before, but I still haven't found a suitable answer or solution that matches my specific situation. (If you know of one, please share the link with me!) My goal is to create a basic dropdown menu wit ...

Having Trouble Scooting Down the Page on Mobile?

Hello there! I'm having a bit of trouble trying to figure out why the scrolling functionality isn't working on my small web app when it reaches the media breakpoint for mobile devices. If you'd like to take a look, here's the link to ...

Placing content in bottom and moving towards the left side

On my webpage, I have a div that I would like to fill with content similar to the image. How can I achieve this without resizing the div and instead populate it from bottom to top? ...