英文:
Form Will Grow Horizontally Not Vertically
问题
我正在尝试制作一个计算器，目前正在处理HTML和CSS。我正在尝试使计算器在垂直和水平方向上变大。我可以轻松增加宽度以适应容器，可以使用width: 100%或flex: 1 1 100%; 但是，每当我尝试增加高度，使用height: 100%; 它就会超出容器，并且输入按钮变得非常大。我已经尝试使用flex-basis和flex-grow来使其垂直增长，但没有成功。
<body>
<div class="container">
<form>
<div class="display">
<input type="text" name="display">
</div>
<div class="column1">
<input type="button" value="AC">
<input type="button" value="+/-">
<input type="button" value="%">
<input type="button" value="/">
</div>
<div class="column2">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="*">
</div>
<div class="column3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-">
</div>
<div class="column4">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="+">
</div>
<div class="column5">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
</div>
</form>
</div>
</body>
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 50%;
width: 30%;
}
form {
flex: 0 1 100%;
}
.column1, .column2, .column3, .column4, .column5, .display {
display: flex;
height: 100%;
}
.column1 input, .column2 input, .column3 input, .column4 input, .column5 input, .display input {
flex: 1 1 100%;
}
英文:
I am attempting to make a calculator and I am working through the HTML and CSS currently. I am trying to make the calculator bigger both vertically and horizontally. I can easily increase the width to fit the container either using width: 100% or flex: 1 1 100%; However, whenever I try to increase the height with height: 100%; it goes outside of its container and the input buttons become huge. I have tried to use flex-basis and flex-grow to make it grow vertically as well and I can not.
<body>
<div class="container">
<form>
<div class="display">
<input type="text" name="display">
</div>
<div class="column1">
<input type="button" value="AC">
<input type="button" value="+/-">
<input type="button" value="%">
<input type="button" value="/">
</div>
<div class="column2">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="*">
</div>
<div class="column3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-">
</div>
<div class="column4">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="+">
</div>
<div class="column5">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
</div>
</form>
</div>
</body>
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 50%;
width: 30%;
}
form {
flex: 0 1 100%;
}
.column1, .column2, .column3, .column4, .column5, .display {
display: flex;
height: 100%;
}
.column1 input, .column2 input, .column3 input, .column4 input, .column5 input, .display input {
flex: 1 1 100%;
}
答案1
得分: 1
这是如何做到的：
.container{
/* 高度: 50%; */
宽度: 100%;
}
.column1, .column2, .column3, .column4, .column5, .display{
高度: calc(100vh/6);
/* 将视窗高度分配给6个列 */
}
英文:
Here is how you can do it:
.container{
/* height: 50%; */
width: 100%;
}
.column1, .column2, .column3, .column4, .column5, .display{
height: calc(100vh/6);
/* Distributing the viewport height within 6 columns */
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论