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

Detailed explanation of MySQL string concatenation function GROUP_CONCAT

Solution to interface deformation when setting frameset height

Detailed explanation of MySQL string concatenation function GROUP_CONCAT

A simple way to achieve scrolling effect with HTML tag marquee (must read)

Record a pitfall of MySQL update statement update

In-depth study of JavaScript array deduplication problem

Steps to create a Vite project

MySQL Series 3 Basics

How to enable or disable SSH for a specific user or user group in Linux

Implementation of removing overlapping time and calculating time difference in MySQL

Mysql Sql statement exercises (50 questions)

Native Js implementation of calendar widget

Recommend

Analysis of mysql temporary table usage [query results can be stored in temporary tables]

W3C Tutorial (3): W3C HTML Activities

Introduction to HTML Chinese Character Encoding Standard

Linux's fastest text search tool ripgrep (the best alternative to grep)

Mysql cannot select non-aggregate columns

MySQL deduplication methods

Implement MySQL read-write separation and load balancing based on OneProxy

Click on the lower right corner of the css pseudo-class to see a check mark to indicate the selected sample code

MySQL optimization tutorial: large paging query

Detailed instructions for installing mysql5.7 database under centos7.2

Implementation of Docker deployment of ElasticSearch and ElasticSearch-Head

Mysql join query syntax and examples

Several ways to remove the dotted box that appears when clicking a link

MySQL 8.0.12 installation and configuration method graphic tutorial (windows10)

JavaScript realizes magnifying glass special effects