HTML5/CSS3:移动设备的100%高度布局,两个div作为按钮,没有溢出
HTML5是一种用于构建网页内容和结构的标记语言，而CSS3是一种用于控制网页样式和布局的样式表语言。在移动设备上实现100%高度布局并使用两个div作为按钮，没有溢出的方法如下：
- 首先，确保HTML文档的DOCTYPE声明为HTML5，以便使用HTML5的新特性和语法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动设备高度布局</title>
<style>
/* 设置html和body元素的高度为100% */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* 设置包含按钮的容器div的高度为100% */
.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 设置按钮div的样式 */
.button {
width: 200px;
height: 50px;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="button">按钮1</div>
<div class="button">按钮2</div>
</div>
</body>
</html>上述代码中，我们通过设置html和body元素的高度为100%，确保整个页面的高度占满移动设备的屏幕。然后，使用flex布局将包含按钮的容器div垂直居中，并设置其高度为100%。最后，设置按钮div的样式，包括宽度、高度、背景色、文字颜色等。
这样，无论移动设备的屏幕大小如何，页面都会自适应并实现100%高度布局，两个按钮div也不会溢出。
相关·内容
1回答
使用柔性盒使3div适合窗口高度
html、css、flexbox
如何使3个独立的div延伸到屏幕的高度而不溢出？
我使用引导和柔性盒，但是每当我将行的高度设置为100%时，溢出就会启动。
我希望‘内容’(黄色区域)填补大部分的页面和标题(水区)和页脚(粉红色区域)只占100 up。
我一直在玩柔韧的生长和伸展，但没有用。
提前感谢您的任何帮助。
CSS：
body {padding-top: 51px;}
html, body {
background-color: rgb(48, 48, 48);
height: 100%;
}
.body-container {
height: 100%;
display: flex
浏览 1提问于2016-06-22得票数 3
回答已采纳
2回答
HTML5指令破坏灵活布局
html、css
我玩灵活布局(display: flex)很有趣，它的能力给我留下了深刻的印象。然而，我遇到了一个问题，它在某种程度上与<!DOCTYPE html>有关。
我想创建一个简单的页面。页眉和页脚(都是50 and高度)，以及应该占用剩余空间的内容。页眉和页脚应该总是可见的，所以即使内容更长，也不应该出现滚动。
请看下面的片段
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.conta
浏览 1提问于2015-01-27得票数 2
回答已采纳
2回答
使div标记占用整个页面的长度。
html、css、height
如果我有以下HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.container {
display: flex;
flex-direction: row;
}
.left {
height: 100%;
display: block;
width: 50%;
浏览 5提问于2020-04-04得票数 0
回答已采纳
1回答
如何防止android键盘推升我的容器？
android、html、css、responsive-design、keyboard
因此，我正在做一个登录表单的网站，首先响应移动，我有一个页脚到模态容器的末端。问题是，当我想在两个输入中写一些东西时，键盘就会出现，并将页脚向上推。我希望页脚留在位置和键盘只是不调整我的模式容器或与网站的互动。
这是密码。
* {
margin:0;
padding:0;
}
header{
background-color:red;
width:100%;
height:30px;
display:flex;
justify-content: center;
align-items: center;
}
.to-mo
浏览 0提问于2020-08-06得票数 0
回答已采纳
2回答
为什么当我切换/添加另一个带有其他背景的类时，我的背景svg没有改变？
jquery、html、css、svg、background-image
我有一个带有svg背景+动画的div。我添加了一个按钮，并说当我单击一个类时，类应该被切换/添加和移除，这样“背景图像”就会发生变化。但它不起作用。也许这是jquery中的一个错误，但实际上我一点也不知道。
这是我的代码：
我的css代码包含完整的svg代码(->u不能超过30.000 charakters )：
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: black;
overflow-y: hidden;
}
.Space-Contain
浏览 4提问于2017-02-05得票数 1
回答已采纳
2回答
如何填充一个div但保持子div的纵横比？
html、css、layout
下面的页面显示HTML和CSS。我希望左边的五个按钮(div id=button1..5)在屏幕的任何高宽比和分辨率上都是方形的。另外，我希望这五个按钮总是填充中间的div (id=menu)。事实上，我可以做到两者，但不能在一起！使用Flex和前者很容易，正如您所看到的，我在下面的代码中已经完成了这些工作。我看过几个这样的例子，特别是 one，但它们不像我所说的那样。
有什么建议吗？注意:最好没有Javascript。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
浏览 1提问于2019-05-28得票数 0
回答已采纳
1回答
不适用于嵌套div标记的flex属性
html、css、flexbox
我试图实现0和C按钮的两倍大小的普通按钮和=按钮的高度两倍(更高)的正常按钮的高度。
我试过的-
Div1 -主分区显示挠曲和方向列。
Div2 - Div1内部的输入栏。
Div3 -按钮的全部除数。
Div3 -以行方式包含两个作为flex布局的Div (Div4，Div5)。
Div4 -包含除上一列中的按钮以外的按钮的Div4行。
在Div4中，我能够为我需要两倍宽度的按钮做flex:2。
Div5 --最后一列按钮，但当我将flex:2设置为"=“按钮时，它的高度不会改变。
<!DOCTYPE html>
<html lang="
浏览 9提问于2022-08-11得票数 0
1回答
我试图创建一个网页的图像滑块，我已经有了它的功能，但我想把它向下移到页面的中心。
最初，我尝试使用top: 50%; on .image-container {来实现这一点，但是我发现这减小了图像大小(请参阅图片中的前后)：
在实现top: 50%;：之前
在实现top: 50%;：之后
.The-Area {
min-height: 972px;
width: 100%;
background-image: linear-gradient(rgba(6,4,11,0.4),rgba(6,4,1,0.3)),url(images/thumbnail_IMG_3625.j
浏览 1提问于2022-06-23得票数 1
回答已采纳
2回答
如何删除我的html页面底部的额外空空间和滚动条？
javascript、html、css
我正在尝试删除底部的空空间，以及我的html页面一侧的滚动条和css。
我希望页面能够适应屏幕，而不需要在页面底部添加额外的空间/并在边滚动条。
我已经在html中将边距和填充设置为0，并将html和body设置为100，但在底部仍有空空间。
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
浏览 3提问于2021-01-20得票数 4
回答已采纳
1回答
使用引导HTML垂直和水平对齐项
html、css、twitter-bootstrap、bootstrap-4
我正在尝试创建一个网页，其中有一个按钮，并在它下面的文字。我正在尝试使用引导来这样做，但是目前，下面的文本要么在按钮下方太远，要么在设备之间的按钮下面不一致地间隔。下面是我正在使用的代码：
<div class="container-fluid" style="height: 75vh;">
<div class="h-100 d-flex justify-content-center align-items-center">
<div class="grid&
浏览 4提问于2022-11-27得票数 0
1回答
如何使几乎为空的<div>达到视口大小而不溢出？
html、css
我试着把我的个人页面分开，每个页面都是视口的大小。(第一个只有我的“徽标”在后台，第二个是我的个人信息等等)。然而，当我得到这个大小时，我意识到我无法对齐我的按钮(链接)，因为存在溢出。当我设法得到溢出，第一个div变得很小。我做错了什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=ed
浏览 3提问于2022-08-15得票数 0
回答已采纳
1回答
如果div的高度超过初始高度，则使其高度适用于内容
html、css
我有以下html/css代码。我想要做的是，只有当.inner元素的高度超过了我在代码中设置的默认最小高度时，它才能适应内容。下面的代码不允许.box元素扩展到.inner的初始高度，我不想这样做。我怀疑这与flex有关。如果我将display:flex;从.inner中删除，则这些框会超出.inner的初始高度，但.inner不会伸缩以容纳内容。在本例中，我希望.inner扩展，而使用display:flex;或display:grid;表示.inner，否则，将按照我在代码中设置的方式进行操作。如何才能做到这一点？
* {
margin: 0;
padding: 0;
bo
浏览 0提问于2021-06-14得票数 1
1回答
在ASP.NET内核中添加网格后，填充空间太大，而在VS代码中则很好
css、asp.net-core、padding
我一直在设计一个在Visual代码中使用网格和flexbox的站点，在那里一切都很好(视觉上的)。
现在，当我必须添加后端时，我不得不将我的代码传输到Asp.Net核心(v5.0)，并且由于某种原因，网格的填充太多了。CSS文件是相同的。下面是我的网格代码：
body {
margin: 0;
overflow-x: hidden;
background-image: url("../background.jpg");
}
.container {
width: 100vw;
height: 100vh;
display: gr
浏览 4提问于2022-05-31得票数 0
回答已采纳
1回答
与viewport相关的css - img和div大小调整
html、css、flexbox
为了个人学习，我尝试在HTML5和CSS中创建一个网络漫画风格的布局。我的目标是使main-container类及其所有内容都适合浏览器的视图。我遇到的问题是，图像按一定的窗口大小缩放，而在图像被切断后出现的HTML。
我尝试使用main-container css中的"vh“度量单位来应用最大高度和高度值。我似乎不能让它正常工作。我尝试过在Stackoverflow (和)上提到的东西，但是似乎没有一个能产生想要的结果。我想我错过了CSS行为的一些基本内容。
(如果重要，默认情况下此实践映像文件的大小为800x500 )。
以下是代码：
* {
margin: 0;
pa
浏览 3提问于2022-05-05得票数 0
2回答
如何让flexbox填充水平和垂直空间？
flexbox
我使用新的flexbox创建了这个HTML：
<html>
<head>
<style>
body {
margin: 0
}
div#outer-container {
height: 100%;
}
div#inner-container {
display: flex;
height: 100%;
flex-direction: row;
浏览 0提问于2014-02-26得票数 0
2回答
按钮的可点击区域在按钮上方
javascript、html、web
我对HTML非常陌生，在使用display: flex之后遇到了这个错误。我的按钮可点击区域大约比实际按钮高出10 My，当我使用检查元素时，按钮突出显示显示在可见按钮的上方。
<body>
<h1 id="HomepageTitle" style="display: flex; justify-content: center; font-family: sans-serif; color: black;">CoderTom</h1>
<h2 id="HomepageHeader" sty
浏览 4提问于2022-02-08得票数 0
2回答
垂直图像调整大小。(Flex或vh)
html、css、flexbox、responsive-design
嘿！感谢您的阅读！我有一个网页应用程序登录屏幕。我的重点是创建一个响应性的应用程序类登录页面。(无卷轴等)
发行说明：
的视口宽度为300 to，在463 to和较短的视口高度，所有项目都填充了整个屏幕，页面底部的内容开始被切断。
同样可以说是528 be和650 be高度。
(这告诉我，它正在缩放到一个特定的纵横比(电话肖像到相对正方形的纵横比)。在景观的纵横比中，图像变得大得可笑- ...expected，但不想要)
目标：，我只是想让图片在高度上缩小，并在改变视口高度时保持其纵横比。(支持弯曲生长/收缩提供的纵横比)，而不是溢出和改变这个比率。
注意:对于那些想要一个更简单的例子的人来说
浏览 9提问于2022-05-12得票数 2
回答已采纳
1回答
iphone上的flexbox布局没有占用适当的空间
javascript、css、ios、progressive-web-apps
我一直在尝试让这种布局适用于智能手机。我想做的是有一个固定的头部，不移动，然后在头部下面有一个弹性容器，它占据了屏幕空间的其余部分。在flex容器内部应该有3个大小相同的部分，每个部分的大小与flex容器的大小相同。
我当前的尝试不起作用。我不知道如何防止固定的头部移动，我也不知道如何让flex容器的每个部分都有合适的大小。
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes"
浏览 1提问于2020-04-27得票数 0
2回答
如何将文本块定位到图像容器旁边
html、css、text、position、css-position
我在向我的网页添加段落文本时遇到了一些问题。我有一个视差图像，我想放置一个标题和段落旁边。当我尝试这样做时，文本出现在一个细长的直线中。我尝试过使用内联块和relative:position，但似乎都不起作用。如果有人能看一下我的代码并告诉我哪里出了问题，我将不胜感激
<!DOCTYPE html>
<html>
<head>
<title>"Parallax Astro Girl"</title>
<link rel="stylesheet" type=&
浏览 4提问于2021-12-01得票数 0
3回答
我无法在水平和垂直方向对div进行居中。
html、css、flexbox
我在div上使用了Flexbox，但是它仍然只是水平的，而不是垂直的。我要把它放在屏幕中间。下面是我的代码-：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
浏览 3提问于2022-09-06得票数 -1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
