html - 如何为我的按钮设置响应高度

Question

所以我一直在尝试制作一个响应式按钮，我设法制作了宽度而不是高度，这是我的 html：

.Block {    
    display: inline-block;
    padding: 2px;
    margin: 2px;
    vertical-align: top;
    width: 90%;
    height: auto;
    background-color: yellow;
    color: black;
}

.Block:hover {    
    display: inline-block;
    padding: 2px;
    margin: 2px;
    vertical-align: top;
    width: 34%;
    height: 90%;
    background-color: yellow;
    color: black;
}

<button onclick="location.href='https://website.com'" class="Block">Website</button>

它对高度没有反应

标签： htmlcss

Answer 1

我改为.Block:hover使用vh(veiwport height) ，如下所示：

.Block:hover {
  width: 34%;
  height: 90vh;
}

.Block {
  display: inline-block;
  padding: 2px;
  margin: 2px;
  vertical-align: top;
  width: 90%;
  background-color: yellow;
  color: black;
}

.Block:hover {
  width: 34%;
  height: 90vh;
}

<button onclick="location.href='https://website.com'" class="Block">Website</button>