如何垂直适应不同屏幕尺寸的内容？ 下面的代码
[英]How to vertically fit contents into for different screen sizes? Code below
问题描述
I have tried everything from html and body with adjusting height, min-height, max-height set to 100%vh or 100% or js to check screen size but nothing works.
我已经尝试了从 html 和调整高度、最小高度、最大高度设置为 100%vh 或 100% 或 js 来检查屏幕尺寸的身体，但没有任何效果。 Finally created a container to set height but even container goes out of screen size vertically.最后创建了一个容器来设置高度，但即使容器垂直超出屏幕尺寸。 All buttons needs to adjust to screen size but lower ones are getting cut off.所有按钮都需要调整到屏幕尺寸，但较低的按钮会被切断。
.container { width: 100%; margin: none; min-height: 100vh; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); overflow: auto; }.button { background-color: #e7e7e7; position: absolute; border: none; color: black; padding: 2vw 3vw; text-align: center; text-decoration: none; display: inline-block; font-size: 4vw; cursor: pointer; border-radius: 50%; }.button1 { margin-left: 50%; margin-top: 45%; }.button2 { margin-left: 30%; margin-top: 65%; }.button3 { margin-left: 80%; margin-top: 50%; }.button4 { margin-left: 80%; margin-top: 10%; }.button5 { margin-left: 10%; margin-top: 10%; }.button6 { margin-left: 40%; margin-top: 20%; } button7 { margin-left: 10%; margin-top: 45%; }.button8 { margin-left: 10%; margin-top: 90%; }.button9 { margin-left: 70%; margin-top: 75%; }.button10 { margin-left: 50%; margin-top: 95%; } @media screen and (max-width: 600px), (min-height: 100%) {.button { padding: 10px 20px; font-size: 5vw } }
<body> <div class="container"> <button class="button button1" value="1">1</button> <button class="button button2" value="2">2</button> <button class="button button3" value="3">3</button> <button class="button button4" value="4">4</button> <button class="button button5" value="5">5</button> <button class="button button6" value="6">6</button> <button class="button button7" value="7">7</button> <button class="button button8" value="8">8</button> <button class="button button9" value="9">9</button> <button class="button button10" value="10">10</button> </div>
1 个解决方案
解决方案1
0 2022-09-16 00:32:32
Never mind, found the solution after going crazy for hours, no need of head/body/meta/js/container etc, juts removed all that and trick was vh instead of % in each button margin-top.没关系，在疯狂几个小时后找到了解决方案，不需要 head/body/meta/js/container 等，突出部分删除了所有这些，技巧是 vh 而不是 % 在每个按钮边距顶部。 Now I can sleep.现在我可以睡觉了。
.button1 {margin-left: 60vw; margin-top: 35vh;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.