如何将Frameset布局转换为Iframe格式？附问题代码

Let's work through the problems you're having with converting your frameset layout to iframes. The main issues were invalid CSS syntax, incorrect iframe source handling, and missing baseline layout setup. Here's the fully corrected implementation:

Corrected CSS #

/* Ensure the entire viewport is used as the layout base */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent unwanted page scrolling */
}

.DSmain {
  width: 550px;
  height: calc(100% - 22% - 49px);
  position: absolute;
  top: 49px; /* Align directly below the top iframe */
  left: 0;
  border: 0;
}

.DSleft {
  height: calc(100% - 22% - 49px);
  width: calc(100% - 550px);
  position: absolute;
  top: 49px; /* Match top position of DSmain */
  left: 550px; /* Align to the right of DSmain */
  border: 0;
}

.DSsub {
  width: 100%;
  height: 22%;
  position: absolute;
  bottom: 0; /* Pin to the bottom of the viewport */
  left: 0;
  border: 0;
}

Corrected HTML #

<!-- Top navigation frame -->
<iframe src="/vew/DS_Top.jsp" width="100%" height="49px" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>

<!-- Middle left content frame -->
<iframe src="/vew/DS_Main.jsp" class="DSmain"></iframe>

<!-- Middle right sidebar frame -->
<iframe src="/vew/DS_Left.jsp" class="DSleft"></iframe>

<!-- Bottom footer frame -->
<iframe src="/vew/DS_Sub.jsp" class="DSsub" scrolling="no"></iframe>

<!-- Hidden zero-height frame -->
<iframe src="/vew/DS_White.jsp" width="100%" height="0" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>

Key Fixes Breakdown #

• calc() Syntax Fix: Your original CSS had no spaces around calc() operators (e.g., calc(100%-22%-49px)). Browsers require spaces to parse these calculations correctly — adding them ensures the height/width values are computed properly.
• Invalid Iframe src: Using javascript:'/vew/...' was causing the browser to render the path as plain text instead of loading the actual page. Replacing this with the direct URL path fixes the content loading issue.
• Precise Positioning: Added explicit top and left values to align middle frames below the top iframe, and bottom:0 to pin the bottom frame to the viewport. Removed redundant margin properties that were causing layout shifts.
• Viewport Height Setup: Setting html, body { height:100%; } ensures your iframes can calculate their heights relative to the full browser window, which is critical for the calc() functions to work.

内容的提问来源于stack exchange，提问作者백금란