如何更改使用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的響應表的行的高度

回答

相關問題