conceal a targeted section from the bottom of the iframe

I have a website embedded inside an iframe for use in a webview application.

<body>
    <iframe id="iframe" src="http://www.medicamall.com"></iframe>
</body>

This is the CSS code:

body {
    margin:0;
    padding:0;
    height:100%;
}
#iframe {
    border:none;
    width:100%;
    height:calc(100% + 200px);  
    position: absolute;
    overflow: hidden;
}

I want to hide a specific 200px from the bottom of the iframe. It works when I use height:calc(100% + 200px), but when scrolling to the bottom of the page, it appears with a scroll bar. How can I prevent this area from being shown in the scroll as well?

Answer №1

To prevent overflow, it is recommended to transfer your CSS code to conceal the excess content to the parent container of the iframe.

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
#iframe {
    border: none;
    width: 100%;
    height: calc(100% +200px);
    position: absolute;
}

For a practical demonstration, check out my plnkr link below.

http://embed.plnkr.co/xFXzg7g90Itpuee6hKB9/

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

Issue with $http.get in fetching information from PHP server

Dealing with duplicate keys error in AngularJS, PHP, and MySQL I have been working on a web-based system and encountered an issue with ng-repeat displaying duplicate keys. I am unsure how to resolve this issue. The select all brand functionality seems to ...

Using unicode characters to style your Angular application

Hey there! I have an Angular 5 app on StackBlitz that implements table sorting. You can check it out here: https://stackblitz.com/edit/angular-rxdzom. The code for this app is based on the example from . In the app, I've used a stylesheet at ./app/sor ...

What is the most effective method for digitally collecting a signature?

Currently, I am in the process of developing a website application using PHP that demands a signature from the user. This particular section of the website will only be accessible on Windows-based tablets. Hence, my inquiry is as follows: What method wo ...

Tips for creating a pop up window function

$.ajax({ //.... success: function() { }, When the success event is triggered, I aim to display a fixed-size window with a close button positioned at the top right corner. However, despite my attempts, it seems that the functionality is not wor ...

Curious about making an AJAX call with jQuery?

As I work on a jQuery ajax statement, my main goal is to receive a payload from the server and then process it in a separate function. However, I'm currently facing some difficulties with the syntax of the function. $.ajax({ url: 'mypgm ...

The video auto plays in a pop up window, but if the pop up doesn't appear, I can still hear the audio

I recently added a pop-up to my website and attempted to include autoplay functionality. However, I encountered an issue where the sound would still play even if the pop-up did not appear upon refreshing the page. How can I prevent the autoplay when the po ...

Guide on injecting javascript code containing php variables into a php page

I have successfully developed a PHP page and Javascript code that includes some PHP variables. The code is designed to insert PHP variables into the database using Javascript: <?php $id = "Kevin"; $user = "Calvin"; ?> <!-- include jquer ...

activating javascript function in rails when the page reloads

I have a rails4 app and I'm looking to implement some specific JavaScript events when the page loads, but only if the user is coming from a certain page. On the post#index page, all comment replies are initially hidden. When a user clicks on a specif ...

Evaluating substrings within a separate string using JavaScript

I need to compare two strings to see if one is a substring of the other. Below are the code snippets: var string1 = "www.google.com , www.yahoo.com , www.msn.com, in.news.yahoo.com"; var string2 = "in.news.yahoo.com/huffington-post-removes-sonia-gandh ...

Bootstrap 5 NavBar Toggle hamburger Menu not displaying menu items

I attempted to create a navigation bar using the navbar instructions in Bootstrap 5. I included a Toggle hamburger Menu and linked it to the list that should be displayed. However, when I decrease the screen size, the Toggle feature does not function as ex ...

Issue with converting form data to JSON format

Having an issue converting a filled form in HTML to a JSON request for sending to the server via HTTP POST. Despite having a filled form, the JSON request only shows an empty array. Here is the JavaScript snippet: $("#submitSurveyBtn").on("click", functi ...

Implementing Node Express 4 to efficiently handle response generation from successive API requests

I'm currently in the process of developing a NodeJS server using Express4. The main purpose of this server is to act as a mediator between my frontend Angular app and a 3rd party API. I've set up a specific path that my frontend app can request, ...

Having trouble displaying my klout score with ajax

I'm attempting to showcase a Klout score on a webpage Here's my code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> var settings = { "url": "http://api.klout.co ...

When using create-react-app with JEST to run tests, TypeScript errors are not displayed

When I write incorrect TypeScript code in my project set up with create-react-app, running tests using npm test does not show any errors in the terminal. Is this normal behavior? It would be helpful to see these errors to avoid writing incorrect TypeScript ...

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

Tips on incorporating jQuery cross-domain functionality

Attempting to retrieve and display the firstName data from this URL: http://www.w3schools.com/jquery/demo_ajax_json.js, as part of a test for another project. Encountered the error message: Origin null is not allowed by Access-Control-Allow-Origin, prompt ...

The Laravel href link will fail to work when the URL does not include the string 'http'

I am encountering an issue with a particular hyperlink tag <a href="{{ $organization->website }}">Link</a> When the URL in $organization->website does not start with http:// or https://, the link fails to direct me properly. Instead, i ...

Searching for a streamlined approach to retrieve a segment of a string

I'm currently working with JavaScript and TypeScript. Within my code, I encountered a scenario where I have a string that might contain certain tags indicating importance or urgency. Here are a couple of examples: A: "Remind me to go to the store to ...

"Drag and drop elements that automatically snap to a grid and move with

I'm trying to create a small, square div that follows the mouse cursor, but I want it to snap to a 3x3 pixel grid. Here is what I have so far: $(document).mousemove(function(e) { window.x = e.pageX; window.y = e.pageY; if(window.x % 9 === 0 ){ ...

What could be causing my data to shift after refreshing in Firefox with the F5 key?

My webpage has four tables, each containing rows with two text boxes filled with numeric values from the server. However, something peculiar occurs. When I add data to a row, let's say row 1, and then refresh the page, two values are mysteriously mov ...