HTML表格：重新缩放浏览器页面，不显示滚动条_Html_Css

HTML表格：重新缩放浏览器页面，不显示滚动条

html css

HTML表格：重新缩放浏览器页面，不显示滚动条,html,css,Html,Css,我有这个密码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testPage</title> <style> table td { width: 50%; } </style> </head> <body>

我有这个密码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>testPage</title>   
    <style>
        table td {
            width: 50%;
        }
   </style>
</head>
<body>  
    <div id="titlebar">
      <center>
        Select option:
        <select onchange="onSelect.call(this, event)">
          <option value="one">One</option>
          <option value="two">Two</option>
        </select>   
        <script>
          function onSelect(event) {
            switch (this.options[this.selectedIndex].text) {
              case "One":
                var td = document.getElementById("one");
                td.style.borderColor = "red";
                td.style.borderWidth = "5px";
                td.style.borderStyle = "solid";
                td.style.width = "99%";   
                var td = document.getElementById("two");
                td.style.borderColor = "black";
                td.style.borderWidth = "1px";
                td.style.borderStyle = "solid";
                td.style.width = "100%";    
                break;
              case "Two":
                var td = document.getElementById("two");
                td.style.borderColor = "red";
                td.style.borderWidth = "5px";
                td.style.borderStyle = "solid";
                td.style.width = "99%";   
                var td = document.getElementById("one");
                td.style.borderColor = "black";
                td.style.borderWidth = "1px";
                td.style.borderStyle = "solid";
                td.style.width = "100%"; 
                break;
            }
          }
        </script>
      </center>
    </div>
    <div id="images">
      <table width="100%" height="100%" border=1 cellpadding=1>
        <!-- first row -->
        <tr id="row1">
          <td id="xxx">
            <div id="xxx_div" style="width:100%;height:370px"></div>
          </td>
          <td id="yyy">
            <div id="one" style="width:100%;height:370px"></div>
          </td>
        </tr>
        <!-- second row -->
        <tr id="row2">
          <td id="zzz">
            <div id="zzz_div" style="width:100%;height:370px"></div>
          </td>
          <td id="kkk">
            <div id="two" style="width:100%;height:370px"></div>
          </td>
        </tr>
      </table>
    </div>    
    <div id="bottom">
      Bottom ...
    </div>
  </body>
</html>

这很好，但是如果我重新缩放我的浏览器页面，你会看到滚动条出现。我知道，我使用的是div height的绝对值，问题可能与此有关，但这只是为了显示问题

我想在这个网站上获得同样的行为

您可以看到，如果重新缩放浏览器比例，则不会显示滚动条，地图也不会显示，因此表格及其内容，重新缩放

建议/示例？

这就是您想要的：

html，正文{ 最小高度：100%；最小宽度：100%；保证金：0；填充：0； } 桌子{ 宽度：100vw；高度：100vh； } 运输署{ 宽度：50%；身高：50%；背景：红色； }

您的解决方案运行良好，但是，我必须在我的行中的每行表中放入一个，查看我的原始代码。我试图使用你的解决方案，但滚动条再次出现……这是因为你为div设置了固定的高度，所有这些的相加超过了总的可见高度。只需删除div的高度或将其更改为100%。总是把孩子们的群体的大小视为父母的100%，你是对的！我试着用for all…修改我的原始代码，现在一切正常