简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
表格將水平增長而不是垂直增長
P粉087074897
P粉087074897 2023-09-15 17:32:14
0
1
582

我正在嘗試製作一個計算器，目前正在研究 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%;
}

P粉087074897
P粉087074897

全部回覆(1)
P粉574268989
P粉5742689892023-09-16 11:43:08 1樓

以下是具體操作方法：

.container{
    /* height: 50%; */
    width: 100%;
}

.column1, .column2, .column3, .column4, .column5, .display{
    height: calc(100vh/6);
    /* Distributing the viewport height within 6 columns */
}
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！