Looking for a way to ensure a div reaches 100% height within a specified area without exceeding the boundaries of the body?

I am working with jQuery mobile and have specific requirements for my project:

  1. The main content will be a large graphic that needs to fill the entire page, with both horizontal and vertical scrolling if necessary.
  2. The header should remain fixed at the top, expanding to fit the screen when rotated.

To achieve this, I added a div within my ui-content div, with the following properties:

<div style="position: absolute; height: 100%;width:100%;top:42px;border:0;overflow:auto;">

However, the div ended up being too large, causing dual vertical scrollbars (one for the body and one for the div).

View my current setup on JSFiddle (two vertical scrollbars, one horizontal scrollbar):

http://jsfiddle.net/jN9r3/

Here is an illustration of the desired outcome: One vertical scrollbar and one horizontal scrollbar.

jquerycsshtmljquery-mobile

Answer №1

To prevent the horizontal scrolling in the overflowing div, simply apply overflow-x:hidden;. This will effectively contain the content within the designated area.

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

Looking for a unique Full Screen Crosshair Cursor with either HTML5 or JQuery?

We've all seen that iconic military crosshair cursor in movies and animations. One example can be found at the beginning of a YouTube video titled "Dishonorable Disclosures" - https://www.youtube.com/watch?v=X-Xfti7qtT0 Another instance is with the ...

htmljqueryfullscreenmouse-cursorpanning

Managed the double-click event to select Snap.svg text

I am currently utilizing the snapsvg library for a project where I am implementing the dblclick event to trigger a browser window alert. However, when clicking on the svg canvas, not only does the alert pop up but some text on the canvas also gets selected ...

javascripthtmlevent-handlingdom-eventssnap.svg

I'm puzzled as to why the hidden input field consistently returns the same value every time

As a beginner in php, I am facing an issue where I cannot trace the correct value of the hidden input which represents the ID of the image in the products table. Every time I try to delete an image, it always returns the ID of the last image in the product ...

phphtmlcss

Tips for verifying the contents of a textbox with the help of a Bootstrap

I am still learning javascript and I want to make a banner appear if the textbox is empty, but it's not working. How can I use bootstrap banners to create an alert? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&g ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

What is the reason for the ineffectiveness of percentage padding/margin on flex items in Firefox and Edge browsers?

I am trying to create a square div within a flexbox. Here is the code I have used: .outer { display: flex; width: 100%; background: blue; } .inner { width: 50%; background: yellow; padding-bottom: 50%; } <div class="outer"> <div c ...

htmlcssfirefoxflexbox

How to Handle Empty Input Data in JQuery Serialization

Having an issue with a form that triggers a modal window containing another form when a button is clicked. The second form includes an input field and send/cancel buttons. The goal is to serialize the data from the modal form and send it to a server using ...

javascriptjqueryajaxhtmlforms

The value returned by jQuery's $(this).val is zero

I am encountering an issue with my list and jQuery function. Here is the setup: <ul id="large_box_custom_list"> <li id="8" class="large_box">Item 1</li> <li id="13" class="large_box">Item 2</li> </ul> Here is the jQuer ...

jquery

What is the method for embedding the creation date of a page within a paragraph on Wagtail?

Whenever a page is created in the admin panel of Wagtail, it automatically displays how much time has elapsed since its creation. https://i.stack.imgur.com/6InSV.png I am looking to include the timestamp of the page's creation within a paragraph in ...

pythonhtmlwagtail

Ways to create a line break within an <input> element with type="text"

https://i.stack.imgur.com/fCh87.png Is there a method to transform the Description field so that it displays as two lines instead of just one line? <label>Description</label> <input type="text" name="description" size=&q ...

html

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

javascripthtml

"Initiate file upload using jQuery ajaxForm when dropping a file onto a designated div element

I am utilizing the jquery form plugin for Ajax file upload, and below is an example of how I have it set up: <form enctype="multipart/form-data" action="upload.php" id="form" method="post"> <input type="file" name="upfile" size="44" /> ...

jqueryajaxupload

Establish initial content for the specified div area

I need help setting page1.html to display by default when the page loads. Can you provide some guidance? Appreciate your assistance in advance. <head>     <title>Test</title>     <meta http-equiv="content-type" content="tex ...

javascripthtmlcssajax

Making a POST request to a REST service in Rails 3 using Phonegap

I've encountered an issue with my rails3 rest service while developing a phonegap app using HTML5 and jQuery javascript. Specifically, I'm struggling to make a POST rest call with ajax jQuery due to cross domain security restrictions. Does anyon ...

ruby-on-rails-3jquerycordovacross-domain

Issue with eq selector not recognizing appended element

I've developed a script that is designed to gather the content of a page, place it within a div element off-screen, and then slide it in from the right. The script removes the old div tag, appends a new one, and repeats this process when another page ...

jqueryappendselector

Is it possible to detect inline elements that have been wrapped?

I am facing a challenge with displaying an indefinite amount of in-line elements. Depending on the width of the browser, some elements may shift to a new line. I am curious to know if it is possible to identify and isolate these rows of elements, or if the ...

javascriptjqueryhtmldom

Utilizing Angular for Webcam Integration

After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream =&g ...

htmlangulartypescriptvideogetusermedia

Is there a way to have two SVG files displayed on a single HTML page at the same time

Currently, I am facing an issue with my graphs. I have a line graph and a boxplot, but the boxplot is appearing below the line graph when I want it to be next to it. Any suggestions on how I can achieve this layout? Thank you! I attempted to use 2 differe ...

javascripthtmlcssd3.jssvg

Preventing document.getElementById from throwing errors when the element is null

Is there a way to handle null values returned by document.getElementById in JavaScript without adding if statements or checks to the code? I'm looking for a solution that allows the execution of subsequent JavaScript calls even after encountering a nu ...

javascripthtmlnull

How can an SVG circular progress bar be created using stroke dasharray?

Can anyone help me with adding dashes between the line in this progress bar I'm trying to recreate? Any suggestions would be greatly appreciated. This is my progress so far: I have been using the react-move library to animate the clock <CircularP ...

cssreactjssvgsvg-animatestroke-dasharray

Harnessing the power of Selenium to locate an anchor tag containing HTML elements with specific classes

I have a specific element on my webpage that I need to extract the text "Add New Member" using Selenium. Here is the HTML code for the element: <a ng-if="userCanEdit" class="btn btn-primary ng-scope" ui-sref="orgs-add" href="#/orgs/add"> <i& ...

javajqueryhtmlselenium