响应表

响应表

关注
发信
关注(28)粉丝(399)

html - 如何使用div更改响应表的行的高度

我正在尝试创建一个响应表（一个简单的键盘），但是只有单元格正在调整大小。我希望整个键盘无需滚动即可显示在屏幕上。

这是我的代码：https://jsfiddle.net/723ar2f5/2/embedded/result/

  #teclat {
    display: table;
    table-layout: fixed;
    border-spacing:5px;
    position: absolute;
    height: 100%;
  }
  #lletra {
    font-family: Verdana;
    font-size: 9vw;
  }
  .fila {
    display: table-row;
  }

  .fila div {
    display: table-cell;
  }
  .tecla {
    width: 100%;
    height: 100%;
  }


如果屏幕足够大，但在移动屏幕中则没有问题。

最佳答案

尝试一下。

.tecla {
    width: 100%;
    height: 13vw;
}


完整代码和
DEMO jsfiddle



 function esborra(tot) {
  var text = document.getElementById('text');
  if (tot == "s")
   text.value = "";
  else
   text.value = text.value.slice(0,-1);
 }
 window.onload = function(e){
   setTimeout(window.scrollTo(0,1),10);

   var elements = document.getElementsByClassName('tecla');
   for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', (function(i) {
        return function() {
          document.getElementById('text').value = document.getElementById('text').value + this.getElementById('lletra').textContent;
        };
      })(i), false);
   }
 }

  body {
    height: 100%;
    width: 100%;
  }
  #teclat {
    /* display: table; */
    /* table-layout: fixed; */
    /* border-spacing: 5px; */
    /* position: relative; */
    height: 100vh;
  }
  #lletra {
    font-family: Verdana;
    font-size: 9vw;
  }
  .fila {
    display: table-row;
  }

  .fila div {
    display: table-cell;
  }
.tecla {
    width: 100%;
    height: 13vw;
}
  .tecla_marc {
    fill: red;
    stroke:black;
    stroke-width:5;
    opacity:0.5;
  }

<body>
<input type="text" id="text" style="width: 60%" readonly/><button type="button" onclick="esborra('1')"></button><button type="button" onclick="esborra('s')">Esborra</button><br/>
<div id="teclat">
<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">A</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">B</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">C</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">D</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">E</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">F</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">G</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">H</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">I</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">J</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">K</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">L</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">M</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">N</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">O</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">P</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Q</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">R</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">S</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">T</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">U</text>
</svg>
</div>
</div>

<div class="fila">
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">V</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">W</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">X</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Y</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">Z</text>
</svg>
</div>
<div>
<svg class="tecla">
  <rect x="2" y="2" rx="20" ry="20" width="95%" height="95%" class="tecla_marc" />
  <text id="lletra" class="lletra" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" x="50%" y="52%">&nbsp;</text>
</svg>
</div>
</div>

关于html - 如何使用div更改响应表的行的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40619305/

10-09 14:35
Powered by LMLPHP ©2024 响应表 0.028092