Achieving full page height with div, iframe, and footer components

Feeling a bit stuck with this problem and hoping for some help. I did some searching on SO but couldn't find a solution that fits my needs. Below is a snippet of the markup I'm working with:

<div id="wrapper">
  <div id="content">
    Here is some text
    <iframe src="http://www.reddit.com" height="100%" width="100%" />
  </div>
  <div id="footer"> footer content</div>
</div>

You can check out an example in the following fiddle: http://jsfiddle.net/SaYAw/36/

My goal is to have the wrapper div take up 100% of the page with no white space at the bottom. I want the wrapper div to adjust its height to fit both the "content" and the iframe, automatically resizing the iframe as the screen or browser window size changes. It seems like it should be simple to achieve, but I haven't been able to figure it out. Any ideas on what I might be missing? Ideally, looking for a pure CSS solution.

csshtmliframe

Answer №1

Make sure to differentiate between classes and IDs

A class in CSS starts with a dot '.', which should match the class set in your HTML

If you are using an ID in your HTML, make sure to indicate it with a hash symbol '#' in your CSS file

html, body
{
    height:100%;
    min-height:100%;
}
#wrapper
{
    border: 1px dotted #000;
    margin:5px;
    height:100%;
    min-height:100%;
}
#content
{
    border:1px solid #ccc;
    margin:5px;
    padding:5px;
    height:100%;
    min-height:100%;
}
#ifrContent
{
    height:100%;
    min-height:100%;
    overflow:scroll;
}

I hope this clarifies what you were looking for

Answer №2

Your iframe is missing the closing tag.

<iframe src="http://www.reddit.com"
height="100%" width="100%"></iframe>

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

Hide the parent div element if the nested unordered list does not contain any items

I transformed an HTML template into a typo3 template using automaketemplate. Within the HTML code, there is a structure of divs like this <div class="bigPostItWrap">1 <div class="postit">2 <div class="p ...

templateshtmltypo3typoscript

Obtaining localStream for muting microphone during SIP.js call reception

My approach to muting the microphone involves using a mediastream obtained through the sessionDescriptionHandler's userMedia event. session.sessionDescriptionHandler.on('userMedia', onUserMediaObtained.bind(this)) function onUserMediaObta ...

javascripthtmlsipsipjs

Ways to compel divs underneath aligned divs

There are six divs numbered 1 to 6. I want divs 2, 4, and 6 to be positioned below divs 1, 3, and 5 respectively. Is it possible to achieve this layout? Sorry if my explanation is not very clear. Thank you. http://jsfiddle.net/LkGV8/ <body> <d ...

csshtml

"Trouble with script: external JavaScript file failing to run

The issue lies in the fact that the specified external JavaScript file is not being executed: <script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script> Even when I try to directly access the URL, it downloads ...

javascripthtmlgoogle-analytics

Is it possible to use JavaScript to forcefully transition a CSS keyframe animation to its end state?

One dilemma I am facing involves CSS keyframe animations triggered by scroll behavior. When users scroll too quickly, I would like JavaScript to help send some of the animations to their 'finished/final' state, especially since the animations bui ...

javascriptcssanimationkeyframe

The system encountered an error stating that the class 'Database' could not be found

Whenever I try to establish a connection to my SQL database using my pdo_object.php file, I encounter the following error in my model.php: Fatal error: Class 'Db' not found in /path/model.php on line 8 I have double-checked that all permissions ...

phphtmlmysqlsqldatabase

The error message "invalid module name" is preventing Phoenix from creating an HTML template

Encountering issues while trying to run the phx.gen.html templates. Below is the command that I am attempting: mix phx.gen.html Shipments shipmentroutes shipmentroute address:string date:string groups_involved:string An error message is displayed as fol ...

htmlgeneratorphoenix-framework

Using jQuery to reveal and conceal elements upon hover interaction

I have implemented a basic jquery function to display and hide a div when hovering over an anchor. However, the issue I am facing is that the div disappears when I move my cursor away from the anchor tag. I want to be able to interact with the div without ...

jquerycss

Replacing the yellow autofill background

After much effort, I have finally discovered the ultimate method to remove autofill styling across all browsers: $('input').each(function() { var $this = $(this); $this.after($this.clone()).remove(); }); However, executing t ...

javascriptcssautofill

Incorporating a delete button onto an image using JavaScript

I am currently developing a BlogApp and facing difficulty in attempting to include a button on an image. The image is being retrieved from the Django database in JavaScript (HTML). My goal is to have a clickable button overlaid on the image. views.py def ...

javascriptpythonhtmldjangodjango-views

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

javascriptjqueryhtmlsyntax

Set the background color of a webpage depending on the data retrieved from the database when a specific radio button

I am facing a challenge with my radio buttons that are set to light up green when the page loads. However, I am working on an "order system" where I need a specific button or "locker" to appear red instead of green when the page loads. While I have succes ...

phphtmlcss

Expand and Collapse Button for Customizing Table Height Individually

I trust everything is going smoothly. A challenge I'm facing involves implementing a button to expand a specific row within a table. Currently, clicking the "show more/show less" button extends all rows when the goal is to do it for each individual ta ...

javascriptcssreactjsfrontend

Issues occurring with PhoneGap preventing the execution of AngularJS code

I've recently delved into learning AngularJS with PhoneGap and I have a basic HTML code along with some AngularJS snippets. While everything runs smoothly in the browser, only the HTML portion seems to work when I attempt to run it on my Android phone ...

javascripthtmlangularjsphonegap-buildphonegap

Repeating background images in CSS

Hey there! I'm having a little trouble with my background image in HTML. It's showing up multiple times in a row and despite searching online, I can't seem to find the right solution. Here is the code snippet from my file: <!DOCTYPE html& ...

htmlcssweb

How can I use CSS to transform a "+" symbol to an "x"?

When I created an accordion using HTML, JS, and CSS, I encountered a problem. The "+" sign in the accordion does not rotate correctly as it should. Instead of rotating from the middle of the "+" sign, it rotates from the top. This is my HTML code: <di ...

jqueryhtmlcss

Material UI allows for the creation of numbered lists with ease. This

<List> {instructionList.map((el) => ( <ListItem divider key={el.id}> {el.type === 'number' ? <React.Fragmen ...

javascriptcssreactjsmaterial-ui

Encountering undefined JavaScript functions when called from HTML

I had most of these functions working perfectly, but after restarting my program, I'm now encountering issues with undefined functions in Chrome. I can't pinpoint the exact problem, and even though I've checked through Eclipse, I still can&a ...

javascripthtml

Display the menu and submenus by making a request with $.get()

My menu with submenu is generated in JSON format, but I am facing issues displaying it on an HTML page using the provided code. Can someone please assist me in identifying what mistakes I might be making? let HandleClass = function() { ...

javascriptjqueryhtmljsonajax

Is there a way to make a TABLE expand to match the height of its surrounding element? (or, tackling sluggishness in IE with JavaScript)

I am facing a challenge with a web page where I have a table nested inside of a TD tag. Despite the unconventional approach, I need to ensure that the height of the nested table matches the height of the TD cell containing it upon page load. Currently, I a ...

htmlcssinternet-explorer