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?

javascriptjqueryhtmlcssiframe

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

A guide on integrating the MUI Timepicker with the newest 6 version using Formik

I am currently experimenting with the MUI React Timepicker component and facing an issue during integration with Formik for validation. The problem lies in the inability to bind values properly in the initialValues of the form. const [initialValues, setI ...

javascriptreactjsvalidationmaterial-uiformik

What is preventing me from using JavaScript to generate labels?

My current project involves creating dynamic input fields to filter products by color. I initially attempted static checkbox inputs for this purpose, which worked fine. Now, I want to achieve the same functionality but dynamically through JavaScript. Inste ...

javascripthtmljquerycss

The encoding error in the encoding process must adhere to valid encoding standards

I recently developed a basic program that utilizes process.stdin and process.stdout. However, when I executed the program and tried to input a value for stdout, an error message popped up stating "TypeError: 'encoding' must be a valid string enco ...

javascriptnode.js

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

javascripthtmlcssfademasking

How come JSOUP fails to read in UTF-8 format?

I've been struggling to parse utf-8 using jsoup. I've tried everything I know and even searched on Google. My goal is: String tmp_html_content ="Öç"; InputStream is = new ByteArrayInputStream(tmp_html_content.getBytes()); Documen ...

javahtmlutf-8jsoup

Form tags are closing automatically on their own

Currently experiencing an issue where a form tag is mysteriously closing on its own. In the process of troubleshooting and pinpointing the root cause of this unexpected behavior. Inside the table structure due to Netsuite usage, which complicates the debu ...

jqueryhtmlcssnetsuite

Strategies for loading content lazily on JQuery tabs that is unrelated to the main tab content, such as login or registration sections

I am utilizing lazy loading to display 3 tabs in an ASP.NET MVC web application using Query tabs. However, I also have a Login section (username and password) that I want to be displayed in the tab content area when the user clicks on a link at the top o ...

c#asp.netjqueryasp.net-mvc

Sinon and Chai combination for testing multiple nested functions

I attempted to load multiple external JavaScript files using JavaScript. I had a separate code for the injection logic. When I loaded one JavaScript file, the test case worked fine. However, when I tried to load multiple JavaScript files, the test case FA ...

javascriptsinonchaitestcasesinon-chai

Contrasting the purpose of a function in pure JavaScript versus a function within the scope of an Angular controller

Could someone clarify the distinction between declaring these two functions in an angular controller? function demo() { }; scope.demo = function() { }; Are these two functions similar in perf ...

javascriptangularjsfunctionangularjs-controllerdifference

What is causing this issue with the ajax call not functioning correctly?

$(document).ready(function(){ $('.clickthetext').click(function(){ $.post("submit.php", $("#formbox").serialize(), function(response) { $('#content').html(response); }); return false; }); ...

javascriptphpjqueryajax

Invoke a function from a different vue.js component using the this.$refs property

I'm facing an issue with triggering a sibling element. What I've tried so far <b-img @click="callFileLoader"/> <b-file type="file" ref="fileUploader"></b-file> ... methods:{ callFileLoader () { this.$refs.fileUploader.c ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

Exploring the movement from one component to another in React Native

When working with React Native, I encountered a challenge in navigating between two views. The issue arises from having the button to navigate on one component while my main component is elsewhere. I am using react-navigation for this purpose. Here's ...

javascriptreactjsreact-nativereact-routerreact-navigation

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

htmlcssreactjsnext.js

Updating class after refresh of ng-repeat in AngularJS/Javascript

I am currently using angularJs in conjunction with cordova. Within my ng-repeat loop, each item has an ng-click event that stores the value of the item in an array. Additionally, when I click on an item, it toggles a class on the corresponding div (using ...

javascriptcssangularjsarrayscordova

Potential Unresolved Promise Rejection (ID: 0): The object 'prevComponentInstance._currentElement' is undefined

Attempting to fetch JSON data in react native using axios.get(my_url_path), then updating the state with response.data under the key 'urldatabase'. When attempting to access this state key and read the data from the JSON, an error is encountered: ...

javascriptjsonreactjsreact-native

What is the most effective method for obtaining only the "steamid" from an AJAX request (or any other method)?

I have been attempting to extract only the "steamid" from an AJAX link without success. Could someone please provide some assistance? Here is the link to find and retrieve only the "steamid": here This is the code I have tried: var xhttp = new XMLHt ...

javascriptajax

Is there a way to include input text along with a file upload in an AJAX request to upload.php? And how exactly would I go

How do I include the book name entered in the form field with id:bname in the request to be sent to the page upload.php, and how can I retrieve this text on the upload.php page? function uploadFile(){ var file = document.getElementById("upload"). ...

javascriptphpajax

I'm having an issue with my NextJS timer where it doesn't stop and ends up going into negative numbers. Any

Here is the code snippet for my timer component. It fetches the 'createdAt' prop from the database and functions correctly. However, I have encountered an issue where the timer does not stop at 0 but continues running indefinitely. I attempted to ...

javascriptreactjsdatenext.jstimer

Electron.js issue: ipcRenderer and ipcMain leading to a white screen problem

I am currently working on a desktop application using Electron, Vue, and Vuetify. However, I have encountered an issue where sending data from the rendererProcess to mainProcess using IPC results in a white blank screen. I'm unsure of what is causing ...

javascriptvue.jselectronvuetify.js

Is there a way to retrieve content in tinymce from a JSP file and send it to a servlet that then redirects to a different page

I need guidance on how to store the content from the tinymce editor and post it with a new page creation. What steps should I take? ...

jqueryhtmlajaxjspservlets