css div元素上的多余空间

v7pvogib 于 2023-08-09 发布在其他

关注(0)|答案(4)|浏览(122)

所以我在div元素上有这个多余的空间，包含了我的按钮。出于某种原因，底部有多余的空间。
看起来像是我的显示器Flex在做它？我不完全确定。如果Flex的东西做了，我该怎么解决呢？我应该把弹性线取下来吗？

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

div#Calculator {
  width: 320px;
  height: 620px;
  display: flex;
  flex-flow: column wrap;
}

div#inputs {
  width: 100%;
  height: 15%;
}

div#inputs #inputVal {
  width: 100%;
  height: 100%;
}

div#buttons {
  height: 80%;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

div#buttons div button {
  padding: 28px;
  margin: 5px;
}

个字符
我已经看到了类似的问题，并尝试了它的解决方案，他们似乎没有一个工作，像设置填充和边距为0，我总是这样做或设置按钮的显示块。
如果这类问题已经在这里回答过了，请原谅。

css

来源：https://stackoverflow.com/questions/76826442/excess-space-on-div-element

4条答案

按热度按时间

dohp0rv51#

我有效地消除了多余的空间。现在，它将覆盖整个视口高度，如果你想改变宽度，只需要使用div#Calculator的宽度，其他所有内容都会跟随它。我改变了视口单位的高度，宽度和边距，以便内容完全响应，也删除了不必要的代码。

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

div#Calculator {
    /* This is the total width (When you want to change the width just change this one and everthing will adjust) */
    width: 40vw;
    margin: 0 auto;
}

div#inputs #inputVal {
    height: 19vh;
    width: 100%;
    margin-bottom: 0.5vh;
}

div#buttons {        
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-right: -1%;
    margin-left: -1%;
}

div#buttons div {
    width: 23%;
    margin: 0.5vh 1%;
}

div#buttons div button {
    height: 19vh;
    width: 100%;
}

个字符

赞(0）回复(0）举报 2023-08-09

h22fl7wq2#

"嗨，我是“
这种多余空间实际上来自于弯曲，但这是它的正常行为。
有什么问题吗？
div Calculator的高度是固定的，而inputs容器的高度是其高度的80%。所有的输入“需要”的空间都比这个容器的高度少80%，所以冗余空间被简单地划分为行之间的空白空间。

溶液

编辑：添加了第二个解决方案 *

我不知道你的确切意图，所以我提出两个解决方案。
1.当You not set the container div Calculator constant height时，那么Your Calculator将具有整个内容的高度（但是You随后必须另外设置inputs height -- %在这种情况下不再起作用）。
1.未设置buttons高度。这让inputs有其20%的容器高度和其余的Ypur计算器将是罚款，预计容器将采取更多的空间比需要的（或它是你的意图有这个620 px）。
下面是使用1更新的代码片段。解决方案。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Simple Calculator </title>
    <!-- <link rel="stylesheet" type="text/css" href="Calculator.css"/> -->
</head>
<body>
    <style type="text/css">
        * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }

    body {
        width: 100vw;
        height: 100vh;
    }

    div#Calculator {
        width: 320px;
        display: flex;
        flex-flow: column wrap; 
    }

    div#inputs {
        width: 100%;    
        height: 15%;
    }

    div#inputs #inputVal {
        width: 100%;
        height: 100%;
    }

    div#buttons {
        height: 80%;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    div#buttons div button {
        padding: 28px;
        margin: 5px;
    }
    </style>

    <div id="Calculator">
        <div id="inputs">
            <input id="inputVal" value="">
        </div>  

        <div id="buttons">
            <div> <button class="operators"> + </button> </div>
            <div> <button class="operators"> - </button> </div>
            <div> <button class="operators"> x </button> </div>
            <div> <button class="operators"> ÷ </tton> </div>
            <div> <button id="erase"> C </button> </div>
            <div> <button class="numbers"> 1 </button> </div>
            <div> <button class="numbers"> 2 </button> </div>
            <div> <button class="numbers"> 3 </button> </div>
            <div> <button class="numbers"> 4 </button> </div>
            <div> <button class="numbers"> 5 </button> </div>
            <div> <button class="numbers"> 6 </button> </div>
            <div> <button class="numbers"> 7 </button> </div>
            <div> <button class="numbers"> 8 </button> </div>
            <div> <button class="numbers"> 9 </button> </div>
            <div> <button class="numbers"> 0 </button> </div>
            <div> <button id="equal"> = </button> </div>
        </div>

    </div>



<script type="text/javascript" src="Calculator.js"> </script>
</body>
</html>

字符串
下面是使用2更新的代码片段。解决方案。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Simple Calculator </title>
    <!-- <link rel="stylesheet" type="text/css" href="Calculator.css"/> -->
</head>
<body>
    <style type="text/css">
        * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    }

    body {
        width: 100vw;
        height: 100vh;
    }

    div#Calculator {
        width: 320px;
        height: 620px;
        display: flex;
        flex-flow: column wrap; 
    }

    div#inputs {
        width: 100%;    
        height: 15%;
    }

    div#inputs #inputVal {
        width: 100%;
        height: 100%;
    }

    div#buttons {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    div#buttons div button {
        padding: 28px;
        margin: 5px;
    }
    </style>

    <div id="Calculator">
        <div id="inputs">
            <input id="inputVal" value="">
        </div>  

        <div id="buttons">
            <div> <button class="operators"> + </button> </div>
            <div> <button class="operators"> - </button> </div>
            <div> <button class="operators"> x </button> </div>
            <div> <button class="operators"> ÷ </tton> </div>
            <div> <button id="erase"> C </button> </div>
            <div> <button class="numbers"> 1 </button> </div>
            <div> <button class="numbers"> 2 </button> </div>
            <div> <button class="numbers"> 3 </button> </div>
            <div> <button class="numbers"> 4 </button> </div>
            <div> <button class="numbers"> 5 </button> </div>
            <div> <button class="numbers"> 6 </button> </div>
            <div> <button class="numbers"> 7 </button> </div>
            <div> <button class="numbers"> 8 </button> </div>
            <div> <button class="numbers"> 9 </button> </div>
            <div> <button class="numbers"> 0 </button> </div>
            <div> <button id="equal"> = </button> </div>
        </div>

    </div>



<script type="text/javascript" src="Calculator.js"> </script>
</body>
</html>

型

知识

从flexbox的基本概念描述here：
[..]一个一维布局模型，并作为一种方法，可以提供项目之间的空间分布[...]。
简而言之，非常简单地说，处理项目容器中的冗余空间完全是FlexBox的事情。当然，还有更多的可能性来管理空白空间和项目显示，但在这种情况下，我们谈论划分一个额外的空间。

干杯-干杯

赞(0）回复(0）举报 2023-08-09

jdzmm42g3#

将align-content: center;添加到css中的#按钮选择器或检查css here的align-content属性

赞(0）回复(0）举报 2023-08-09

e0bqpujr4#

div#Calculator {
  width: 320px;
  height: 620px;
  display: flex;
  flex-flow: column wrap;
}

div#inputs {
  width: 100%;
  height: auto; /* Adjusted height */
}

div#buttons {
  height: auto; /* Adjusted height */
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

div#buttons div button {
  padding: 28px;
  margin: 5px;
}

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

css div元素上的多余空间

4条答案

溶液

知识

相关问题

热门标签

最新问答