divを使用して応答テーブルの行の高さを変更する方法

応答テーブル（単純なキーボード）を作成しようとしていますが、セルのサイズが変更されています。スクロールせずに、フルキーボードを画面に表示したい。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%; 
    }

画面は携帯の画面では十分ではなく、大きい場合には正常に見えます。

出典

2016-11-15 Albert

細胞のみがサイズ変更されています。そして何ではない？ –

あなたはフィドルにタイプミスがあります。

私は行が自動的にサイズを変更したいので – Albert

これに沿って何かお試しください。

.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>

出典

2016-11-16 05:12:24

ありがとうございます、私はvwの使用については考えていませんでした。代わりにvhを使用しています。キーボードは画面のサイズに適応します。 – Albert

あなたは喜んで、うまくいきました。乾杯！ –

divを使用して応答テーブルの行の高さを変更する方法

答えて

関連する問題