Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Adjust height of iframe to suit content

R

RobertWA

Active Coder
Hi all,

I have a page with three columns – 25%, 50%, 25%.

Column 1 contains a menu of hyperlinks. When clicked the file opens in an iframe in Column 2. (Column 3 is left blank – for page formatting only.)

My problem is that I can’t control the height of the iframe. If I specify a height which is too small then I get a vertical scrollbar on that column. But there is also a vertical scrollbar on the whole page, and in order to see the entire content of my file in the iframe I need to use both scrollbars.

I can overcome this by specifying a larger value for the iframe height. In this case the content fits comfortably into the iframe and there is no need for a scrollbar on that column – the main page scrollbar is all I need to use to see the complete document. And this is the situation I want, i.e. only one scrollbar.

But the problem with this is my menu links lead to documents of different sizes. If I specify a height value for the iframe which accommodates the largest file, I then have a lot of blank space at the end of the smaller files. In other words my scrollbar takes me way past the end of the file contents.

Is there a way for me to allow the iframe to adjust its height to suit the file contents so that I don’t have the blank space at the bottom and so that I don’t have a vertical scrollbar on the iframe?

The relevant bits of code are:

To create my three columns

CSS: 
.column {
float: left;
}

.col1 {
width:25%; background-color:wheat;
}

.col2 {
width: 50%; background-color:wheat; padding-left:20px; padding-right:20px; height:100%; overflow:visible;
}

.col3 {
width:25%; background-color:wheat;
}

To create the iframe

CSS: 
iframe {
width:100%;
border:none:
}

To create a fixed menu on the page which is unaffected by scrolling the main content.

CSS: 
#menuspace {
position:fixed;
top:150px;
left:0px;
padding-left:50px;
padding-right:40px;
}


HTML

HTML: 
<div class="column col1">
</div>

<div class="column col2">
<iframe src=" Story Introduction.html" name="myFrame" width="100%" style="border:none" style="overflow:visible" style="scrolling:no" height="15000px" padding-right="100px" ></iframe>
</div>

<div class="column col3">
</div>

<div id="menuspace">
<h2 align="center">The Four Stories</h2>
<p></p>
<p><a href="Story 1.html" target="myFrame">First story</a></p>
<p></p>
<p><a href="Story 2.html" target="myFrame">Second story</a></p>
<p></p>
<p><a href="Story 3.html" target="myFrame">Third story</a></p>
<p></p>
<p><a href="Story 4.html" target="myFrame">Fourth story</a></p>
</div>


All files are in the same folder/directory.

Thanks in advance for any assistance.

Robert
 
Sort by date Sort by votes
Why are you even using iFrames for this?
IFrames are a disaster from the security

use as index then a .php file and the include tag
<include src="./header.html"></include>
 
Upvote 0 Downvote
Tealk said:
another question, what do you actually want to achieve?
Click to expand...
Thank you for your reply. As is probably evident I am a novice, but here is my wish list of what I am hoping to achieve.
I want a page with:
A menu, preferably in the left one-quarter of the screen, which is always visible.
Clicking on menu items (hyperlinks) opens the content html files in the middle half of the screen.
This content will generally be longer than the screen height so scrolling will be necessary, but there should not be a scrollbar on this content – only on the main screen. Using this main scroll bar should let me see the entire contents but not affect the menu, i.e. the menu should not scroll up with the contents. I don’t want to have to use two scrollbars to see the content.
Scrolling should not go past the end of the contents.
Any help would be appreciated.
Thanks
Robert
 
Upvote 0 Downvote
Is this what you are asking -
HTML: 
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Stick Left</title>
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .main {
            width: 100%;
            display: flex;
        }
        nav {
            box-sizing: border-box;
            position: sticky;
            top: 0;
            width: 250px;
            height: 100%;
            background: #eee;
            padding: 20px;
        }
        li {
            margin: 10px;
        }
        nav a {
            color: #000;
        }
        nav a:hover {
            color: #3ddeee;
        }
        .container {
            height: 1500px;
            padding: 20px;
            flex: 1;
            background: #888;
        }
    </style>
</head>

<body>
    <div class="main"
        <!-- Navbar -->
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Contact Me</a></li>
                <li><a href="">About Me</a></li>
            </ul>
        </nav>
        <!-- Content -->
        <div class="container">
            <h1>I Am Header</h1>
        </div>
    </div>
</body>

</html>
 
Upvote 0 Downvote
Do you mean you want to load a html file below your navbar menu, like template. In that case you can use php to load the html, like Tealk has already said above. It would be helpfull if you can draw the layout and post that here.
 
Upvote 0 Downvote
Try this. You will need a website or localhost. Change html file name -
HTML: 
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Stick Left</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        function loadContent(){
            $(".container").load("content.html");
        };
    </script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .main {
            width: 100%;
            display: flex;
        }
        nav {
            box-sizing: border-box;
            position: sticky;
            top: 0;
            width: 250px;
            height: 100vh;
            background: #eee;
            padding: 20px;
        }
        li {
            margin: 10px;
        }
        nav a {
            color: #000;
            cursor: pointer;
        }
        nav a:hover {
            color: #3ddeee;
        }
        .container {
            height: 1500px;
            padding: 20px;
            flex: 1;
            background: #888;
        }
    </style>
</head>

<body>
    <div class="main"
        <!-- Navbar -->
        <nav>
            <ul>
                <li><a onclick="loadContent()">Load</a></li>
            </ul>
        </nav>
        <!-- Content -->
        <div class="container">
            
        </div>
    </div>
</body>

</html>
 
Upvote 0 Downvote
Thanks again, BGB.

My screen should be in three columns (25%, 50%, 25%) with the menu fixed in column 1 and the content (the html files) opening in column 2. As column 2 scrolls, the menu in column 1 stays where it is. The layout is like your example but with a blank third column on the right.

I am not familiar with php.
 
Upvote 0 Downvote
For above code you don't need php but you need an online server or a local server.
HTML: 
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Half Quarter</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        function loadContent(){
            $(".container").load("content.html");
        };
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .main {
            width: 100%;
            display: flex;
        }
        nav {
            box-sizing: border-box;
            position: sticky;
            top: 0;
            width: 25%;
            height: 100vh;
            background: #eee;
            padding: 20px;
        }
        li {
            margin: 10px;
        }
        nav a {
            color: #000;
            cursor: pointer;
        }
        nav a:hover {
            color: #3ddeee;
        }
        .container {
            box-sizing: border-box;
            width: 50%;
            height: auto;
            padding: 20px;
            flex: 1;
            background: #888;
        }
        .third {
            box-sizing: border-box;
            width: 25%;
            background: #666;
        }
    </style>
</head>

<body>
    <div class="main"
        <!-- Navbar -->
        <nav>
            <ul>
                <li><a onclick="loadContent()">Load</a></li>
            </ul>
        </nav>
        <!-- Content -->
        <div class="container">
        
        </div>
        <!-- Blank -->
        <div class="third">
        </div>
    </div>
</body>

</html>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom