时间戳

首页 > 解决方案 > 右侧页面底部的空白区域，左侧正确填充背景色

html - 右侧页面底部的空白区域，左侧正确填充背景色

问题描述

如果我没有正确执行此操作（更新我的原件），我深表歉意。

我剥离了代码并指出了会导致页面“短列表”一侧底部出现空白的语句。回顾上一篇文章 - 这是页面布局中的 DIV： * div-1 标题又名 titleFrame [这是静态的] * div-2 菜单又名菜单 [这是静态的] * div-3 主要又名 mainFrame [动态内容区域 ]

Objective: 当一个菜单项被点击时，mainFrame.innerHTML 内容被更新。

理解问题：mainFrame DIV可能包含两个子DIV，参考下面这组代码进行讨论： *** Set A：这个集合没有父DIV

<div id="freewareLeft"> Left list </div>
<div id="freewareRight"> Right list </div>

*** Set B：此 set 有一个父 DIV，有或没有 ID 名称 [ 即。div 而不是 div id="mainFrame" ]

<div id="mainFrame" style="line-height: 20px;">
   <div id="freewareLeft"> ... </div>
   <div id="freewareRight"> ... </div>
</div>

*** Set C：这是所需的代码，因为它具有灵活性

...

A组：这组代码没有问题。调整大小不会在短名单一侧产生任何空白。设置 B：如果 freeLeft 和 freeRight 有父 DIV（有或没有 ID），则显示短列表侧的空白。C 组：这是所需的一组代码（一个 DIV），因为 mainFrame.innerHTML 可以用一个内容更新，也可以用左右 DIV 分屏（两个）内容进行更新。注意：如果更新不包含子 DIV，它会起作用。

这是精简的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <style>
    @charset "utf-8";
    /* CSS Document */
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      margin: 0;
      line-height: 24px;
    }

    .parent{
        display: flex;
    }

    #titleFrame { /* Welcome to the CyberPlaypen */
      position: fixed; 
      top: 0; left: 0; 
      height: 30px; line-height: 30px; width: 100%;
      font-weight: bold;
      overflow: hidden; /* Disable scrollbars. Set to "scroll" to enable*/
      text-align: center; 
      color: white; background: navy;
      z-index: 2;
    }

    #menu {
      min-width: 1000px;
      position: fixed;
      margin-top: 30px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      width: 100%;
      background-color: #0000FF;
      /* opacity: 0.6; */
      z-index: 2;
    }

    #menu a {
      text-decoration: none;
      color: white;
      width: 80px; /*added */
      display: block;
    }

    #menu a:hover {
      background-color: green;
      font-weight: bold;
      text-align: center;
      /* border-radius: 6px; */
    }

    #mainFrame {
      position: relative;
      overflow: auto;
      top: 54px;
      margin-left: 0px; /* was 20px */
      width: 100%;
      height: 100%;
      /* tried min-height: 100vh; same result */
      z-index: 1;
    }

    #freewareLeft {

      background-color: black;
      color: white;
      position: relative;
      float: left;
      width: 216px; 
      min-height: 100vh;
      border-right: 1px solid white;
    }

    #freewareLeft * {
      margin-left: 15px;
    }


    #freewareRight {

      white-space: nowrap;
      background-color: black;
      color: white;
      position: relative;
      float: right;
      width: calc(100% - 217px); 
      min-height: 100vh;
    }

  </style>
  </head>
  <body>
  <div id="parent" class="parent">
    <div id="titleFrame">
      Welcome to CyberPlaypen
    </div>
    <div id="menu">
      <a style="width: 80px;" href="#" onclick="mouseBrowseReset(); codeInjector('mainFrame','Software/softFreeware.txt');">Freeware</a>
    </div>

<!-- put <div id="mainFrame"> here to see the problem, also try with a blank <div> and it's worse -->
    <div id="freewareLeft">
      <br />Test
      <br />Test <!-- Repeat this x times - make one list shorter -->
      <br />Test
    </div>
    <div id="freewareRight">
      <br />Test
      <br />Test <!-- Repeat this x times - make one list shorter -->
      <br />Test
    </div> 
<!-- put closing </div> if testing with <div id="mainFrame"> or blank </div> -->

  </div>
  </body>
</html>

标签： htmlcss

解决方案

您将高度设为 100vh，滚动后您实际上需要高度为父级的 100%，并且您的所有 3 个 div 都直接位于体内。这是解决方案。添加父 div 并将样式设置为display: flex;

在你的 html

<div id="parent" class="parent">
        <div id="titleFrame">
            Welcome to CyberPlaypen
        </div>
        <div id="menu">
..... other html
</table>
        </div>
        <div id="freewareRight">
            <img src onerror="codeInjector('freewareRight','./Default.txt');">
        </div>
    </div>

并以您的风格

.parent{
        display: flex;
    }

编辑：将左/右 div 的内容包装在一个无名 div 中。使用 XMLHttpRequest() 修改 innerHTML 后的代码如下所示：[body] [div mainFrame] [div left][div]content[/div] [/div] [div right][div]content[/div/[/div] [/div] [/body]

推荐阅读