Solution to interface deformation when setting frameset height

Currently I have made a project, the interface is as follows:

This was done using frameset. No problems were found when developing on a wide screen until a user tested it on a 800*600 machine and found that the entire interface was deformed.
At that time, the entire frameset page was only 600 pixels high, and scroll bars appeared in the frames nested in the frameset, which was really ugly. How can I set the height of the frameset higher so that the nested frame page has no scroll bar but the frameset has a scroll bar?

The height of the frameset cannot be set, for example: <frameset rows="110,*" style="height: 1900px;">. At this time, the page is still the height of the screen, not 1900px; setting the height of the frameset's body is also invalid. What should I do? I searched Baidu for many days but couldn't find the answer, so this question has been left unanswered. I also thought of asking the artist to replace the frameset with DIV+CSS, but I was afraid that it would involve too much content and the workload might be too great, so I had to give up.

Inspiration is a strange thing. It may come or not, but when it comes, you cannot stop it. Just after this problem was left for about a month, it suddenly appeared today, and it came with an iframe. When I nested the frameset in it and set the height of the iframse page, the effect really came out. I would like to share the solution with colleagues who have encountered the same problem but cannot solve it.

1. frameset page (inner.html)

Copy code

The code is as follows:

2. iframe page (outer.html)
The key is to set the height of this page. You can set it as high as you want. At this time, the frameset contained in it will also be this height.

Copy code

The code is as follows:

<<: How to prevent duplicate submission in jquery project

>>: What is web design

Analysis of the cutting of the background image of the nine-square grid with adaptive width and height

How to create (CREATE PROCEDURE) and call (CALL) a MySQL stored procedure and how to create (DECLARE) and assign (SET) a variable

This article uses examples to describe how to cre...

Solution to interface deformation when setting frameset height

Analysis of the cutting of the background image of the nine-square grid with adaptive width and height

js to realize automatic lock screen function

Summary of solutions for MySQL not supporting group by

Summary of Common Mistakes in Web Design

What does the legendary VUE syntax sugar do?

Use Docker Compose to quickly deploy ELK (tested and effective)

Introduction to the use of em in elastic layout in CSS3: How many pixels is 1em?

Summary of various postures of MySQL privilege escalation

Implementation of vite+vue3.0+ts+element-plus to quickly build a project

Two methods of restoring MySQL data

Recommend

How to solve the DOS window garbled problem in MySQL

HTML table tag tutorial (25): vertical alignment attribute VALIGN

Pros and Cons of Vite and Vue CLI

CentOS6 upgrade glibc operation steps

Docker configures the storage location of local images and containers

MySQL free installation version configuration tutorial

The latest MySQL 5.7.23 installation and configuration graphic tutorial

Vue two-choice tab bar switching new approach

MySQL 5.7.17 installation and configuration method graphic tutorial under Windows 10

Detailed steps to implement the Excel import function in Vue

Three solutions for sub-functions accessing external variables in JavaScript

How to create (CREATE PROCEDURE) and call (CALL) a MySQL stored procedure and how to create (DECLARE) and assign (SET) a variable

Element Plus implements Affix

Interpretation of 17 advertising effectiveness measures

Analysis of Linux Zabbix custom monitoring and alarm implementation process