What is the best way to ensure a div automatically adjusts its height to fit the screen, and expands if the content goes

My website features a div that expands in height to match the screen size.

Below is the CSS I am using:

.round-cornerapp {
      -webkit-border-radius: 5px 5px 5px 5px; 
      -moz-border-radius: 5px 5px 5px 5px;
      -o-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
     background-color: #C2C2BD;
     height:100vh;
     padding-top: .5cm;

   }

I want this div to adjust automatically if the content exceeds the screen size.

Here's what I have tried:

.round-cornerapp {
      -webkit-border-radius: 5px 5px 5px 5px; 
      -moz-border-radius: 5px 5px 5px 5px;
      -o-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
     background-color: #C2C2BD;
     height:100vh;
     height:auto;
     padding-top: .5cm;

   }

The height does not adjust automatically with the above code, unless I remove 'height: 100vh', but then the height doesn't fit the screen depending on the content of the div.

How can I ensure the div fits the size of my screen even when empty and expands automatically in height as more content is added?

htmlcss

Answer №1

For maximum flexibility, consider utilizing jQuery, specifically the $(document).height() method.

$('.fullscreenDiv').height($(document).height());

Alternatively, you can achieve a similar result using CSS:

.fullscreenDiv {
    min-height: 100vh;
}

Note that your div element must have the class name fullscreenDiv for this to take effect.

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

Assigning an "active" class and URL attribute to a link based on the metadata of the current page

I have three pages, each featuring a navigation bar with three links: <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/home">Home</a> </li> <li class="nav-item"> <a class ...

javascripthtmlbootstrap-4

The HTML form does not function properly on OSX when it contains buttons with Cyrillic names in windows

After installing a site locally on my OSX, which was developed under Windows with cyrillic encoding for some string values, I encountered an issue. I noticed that certain buttons with cyrillic values were not functioning properly until I changed the value ...

phphtmlformsmacoscyrillic

After resolving a quirky syntax error in my ejs code, I can't help but ponder what caused the issue in the first place

For my personal web development project, I've been working on a blog webpage to enhance my skills. However, I encountered an unusual syntax error while modifying the code to display different navigation bars for logged in and logged out users. Here&ap ...

htmlnode.jssyntax-errorejs

Creating precise squares in JavaScript and animating their movement at designated intervals

My goal for the Final Project is to create a JavaScript-based game similar to Guitar Hero, but with squares instead of circles representing the notes. In Guitar Hero, players have to hit the notes at specific times. I am facing a challenge in my code wher ...

javascripthtmlcanvas

Excessive content spilling over into the footer area due to an integrated forum feature within

We have integrated a Muut forum into our website, and it is working well when embedded in a coding block within the page's body. However, there is an issue where the sidebar of the forum gains extra features when logged in as an admin. This causes the ...

htmlcssoverflowembedforum

What is the best way to align these five column boxes to be in line with the Bootstrap button tabs located above them?

I have created a responsive tab and pill list using a combination of CSS and Bootstrap 4. However, I am facing an issue where the boxes in col-2 do not align with the tabs above them. I want the edges of the col-2 boxes to align perfectly with the edges o ...

cssuser-interfacebootstrap-4

Database entries displayed using a CSS grid

Struggling to organize elements in a grid layout using CSS from my database. Despite all efforts, the items keep aligning to the left instead of forming a proper grid https://i.sstatic.net/5SfJZ.jpg I've attempted various methods to grid the items, b ...

javascripthtmlcss

Creating a volume shadow effect with CSS is a great way to add

Can anyone help me achieve a shadow effect like the one shown in this image example? I've attempted to use the after pseudo element, radius, and clip, but haven't been able to get the desired result. https://i.sstatic.net/pqUtb.png .page{ w ...

cssbox-shadow

Sending information to a website using Java

Looking to retrieve exam results from a web page, my program is designed to input the registration number and fetch the resulting data. However, I'm encountering an issue where the program returns the same input page rather than the desired result. Be ...

javahtmlposthttp-post

The method of utilizing React with Redux to display component properties

I am currently trying to include my common component in my main.js file Successfully implemented this However, when attempting to print my Redux data values in the common component, I created a method called handleClickForRedux to handle this task. Even af ...

javascripthtmlcssreactjsredux

Table row with CSS flexbox wrapping

I have a unique set of items, each consisting of: A left side that expands horizontally to occupy the space where the item name is located. A right box at the end containing a few actions. My goal is to ensure that the box with actions on the right wraps ...

htmlcssflexbox

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

javascriptangularjshtmldropzone.js

Navigating to another page upon activating a div element

In my tile-based game, the tiles are composed of 25x30 divs that are 16x16px each. I have implemented on-screen controls to facilitate character movement, where clicking a direction updates the player id to the corresponding div. My query here is whether i ...

javascriptjqueryajaxhtmlcss

Upgrading Xeditable button designs using AngularJS

Have a query. Can you replace the save(submit) button and cancel buttons with links in Xeditable for AngularJS? Appreciate your help ...

javascripthtmlcssangularjs

Embed Zoom Video Without Any Cropping

Attempting to integrate the iPhone Simulator from into our website. Successfully set up a form for users to input their URL, which will then be displayed on a mobile browser via the simulator. However, the size of the embedded simulator is too large for ...

jqueryhtmlcssajaxiframe

The success notification transforms into a cancellation alert once the file has been successfully uploaded

I'm struggling to show the correct message after a file is successfully uploaded. Currently, when a file is successfully uploaded, the success message briefly displays but then quickly changes to the cancel message. I want the success message to rema ...

phpjqueryhtml

Strange arrangement of items in navbar - Using BOOTSTRAP 4

I'm currently experimenting with BOOTSTRAP 4 and the navbar, but the output on my webpage doesn't match what I want to achieve. https://i.sstatic.net/FnGlv.png What I want to achieve is shown in the following link: https://i.sstatic.net/oelsv. ...

htmltwitter-bootstrapcssflexboxbootstrap-4

Preventing right-aligned images from overflowing inside a div on Google Chrome

I am currently utilizing the jQuery cycle plugin to display a slideshow of images that floats to the right within an outer div element. The CSS I am using is as follows: .slideshow { float:right; margin-left: 20px; } The image alignment works per ...

jqueryhtmlcssimagecss-float

Having trouble getting the Bootstrap tooltip to work on a Select option?

Is there a way to have a tooltip displayed for each option in the select box? <select ng-model="rightList" class="form-control" size="13" multiple> <option ng-repeat="item in selectedList" value="{{$ ...

javascripthtmlangularjstwitter-bootstraptwitter-bootstrap-tooltip

Incorporate a span element within the PHP code located in the final div

Having trouble with adding a span in PHP The last div is not functioning correctly. **In need of help on how to insert a span within PHP code.** echo" <tr> <td>$id</td> <td>$name</td> <td>$la ...

phphtmlcss