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

Converting HTML content into Java objects

I have a log of messages from a messaging platform saved in HTML format. Each message is displayed as follows: <div class="message"> <div class="message_header"> <span class="user">User Name</span> <span class="meta"&g ...

javahtmlmessage

Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

I'm currently working on a website where I want to attach a menu-bar to the bottom of the header using #menu { position: absolute; bottom: 0; } Unfortunately, instead of sticking to the bottom of the parent div, the menu-bar is stuck to the ...

htmlcsscss-position

Field for user input along with a pair of interactive buttons

I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...

javascriptphpjqueryhtml

What is the best way to open a link contained within a div by clicking on it

I am currently in the process of developing a website that is able to parse a Spanish dictionary. When looking up the word HOLA, the site provides the definition. However, for other words like CASA, users receive suggestions with links such as My goal is ...

phphtmlparsingphp-parser

How to Implement Button Disable Feature in jQuery When No Checkboxes Are Selected

I need help troubleshooting an issue with a disabled button when selecting checkboxes. The multicheck functionality works fine, but if I select all items and then deselect one of them, the button disables again. Can someone assist me with this problem? Be ...

javascriptjqueryhtml

Unable to manipulate JQuery lightSlider slides using element index

I've been working on a new page design at this link: The code is still a work in progress, so bear with me as I test out some functions and scripts. At the end of the first section, there are 4 logos that, when clicked, will trigger a modal to pop u ...

javascripthtmljquerycssslider

Tips for arranging files within a directory in Netbeans IDE

I prefer to centralize all CSS files in a single folder for easy access. Below is the path of my CSS directory: css/sampl.css. Here, css represents the folder. This is the code snippet I am using: <link href="/CSS/sampl.css" rel="stylesheet" type="te ...

javacssjspurlnetbeans

The application of styling to a CSS class is unsuccessful when the class is dynamically added through Angular

My goal is to create a header that moves with the page and stays fixed once it reaches the top. I am using Angular and came across a solution on Stack Overflow which suggested binding a class toggle to the window scroll event to achieve this effect by addi ...

htmlcssangularjs

Tips on creating a horizontal scrolling effect using the mouse

Is there a way to enable horizontal scrolling by holding down the mouse click, instead of relying on the horizontal scroll bar? And if possible, can the scroll bar be hidden? In essence, I am looking to replicate the functionality of the horizontal scroll ...

javascriptjqueryhtmlcss

How come this straightforward VueJS component template is appearing in the wrong location in the DOM, positioned above a table?

These illustrative examples are not the actual faulty code, but rather simplified for discussion purposes. Issue with Code The code snippet below displays a table, but unexpectedly places the Component values above the table element visually and in the D ...

htmlvue.js

Replace the default disc icon with a more detailed icon for UL lists

I am working with an unordered list and I want to use <details> to show a sublist for one of the items: <ul> <li><details> <summary>details bullet</summary> <ul> <li>detail 1</li> ...

htmlcss

Guide to positioning a div in the center while implementing animations through transition and transformation using scale

Creating a popup for my React app without relying on external libraries is my current project. I am experimenting with using transition and transform with scale to size the popup dynamically based on screen size and content, then center it on the screen. ...

javascripthtmlcssreactjscss-transitions

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

Obtain the title of the text generated by clicking the button using a script function

I am working on a piece of code that generates a text box within a button's onclick function. My goal is to retrieve the name value of each text box using PHP. <script language="javascript"> var i = 1; function changeIt() ...

javascriptphphtml

Tips for creating a responsive carousel slider for images

No matter how much I've tried, I can't seem to find a solution on how to make my image responsive along with the caption. Below is my HTML code: <section id="banner"> <div class="banner-bg"> <div class="banner-bg-item ...

javascripthtmlcsscodeigniter

Guide on modifying HTML attribute with TFHpple in the Swift programming language

I have received an HTML string and I want to modify the elements inside them, specifically the img tags, so that they have a style of width = 100% and height set to auto. This way, when I embed these images into a web view, they can easily adjust to fit th ...

htmlcssswifttfhpple

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

The process of making a pop-up modal instead of just relying on alerts

Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...

javascriptjqueryhtmlcss

Safari experiencing a CSS issue not found in Chrome or Firefox

https://gist.github.com/2354116 When you check the link above in Chrome or Firefox, everything looks good. The divs at the bottom, including the headings and social icons, are centered within a container div without any issues. However, when viewed in Sa ...

csshtmltwitter-bootstrap

Styling CSS: Create circular images with dynamic text positioning or resizing on screens larger than 768px

I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...

cssresponsive-designbootstrap-4