开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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也不会溢出。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

浅淡HTML5移动Web开发

关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的就是相信你已经听过的”响应式布局”，响应式布局意味着媒体查询，这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。...虽然我们可以把设备的分辨率可以分为这几类，但是屏幕的尺寸实在太多，如果针对每一种尺寸写一种样式，我觉得设计师和前端面不用干别的了，因为开发成本实在太大，而且没有必要，我们只需要针对绝大多数的设备结合媒体查询和弹性布局来调整...前面的几个单位大家都比较熟悉，不知道有没有和我一样小白的才知道rem的呢，我们就介绍一下这个新朋友，它是随着css3来到这个世界。...#id{……}、div span{……}、div[class="classname"]{} 但是由于ie某些浏览器的原因，很多好用的选择符不能广泛使用，如ie6只支持a标签的伪类选择符，但是在移动端，我们就不用在意这些了...（3）盒子边框溢出当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。

2.4K5 0

WEBAPP开发技巧总结

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。...当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用 HTML5和CSS3技术做UI布局。...7、学会使用webkit-box 上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...17、如何解决盒子边框溢出当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊

1.9K2 0

【前端面试题】04—33道基础CSS3面试题(附答案)

伴随着大量让人欣喜的功能加入HTML5，CSS3也同样为我们带来了更加绚丽的样式效果。...布局所占宽度（Width）如下： Width= width（包含 padding-left+ padding-right)+ border-top+ border-bottom 布局所占高度（ Height...（2）会在CSS文件中添加大段的查询代码，增加了CSS文件的大小，为改进上述缺点，可以使用 JavaScript获取移动设备屏幕的宽度，根据设计稿的原型尺寸，动态地计算font-size的值。...h1{text- shadow：水平阴影，垂直阴影，模糊距离，阴影颜色} 18、如何把元素从左侧移动50像素，从顶端移动100像素？...当文本溢出时，为了不显示省略标记（…），通过clip直接将溢出的部分裁剪掉。 32、如何实现文本换行？使用word-wrap属性。 normal，只在允许的断字点换行（浏览器保持默认处理）。

2.8K1 0

html中下拉菜单(html做下拉菜单栏)

3.设置ol的高为0，溢出隐藏 4.外部li标签:hover 时，设置ol的高度。...html5中如何创建两个下拉列表并且内容不同？CSS布局HTML小编今天和大家分享代码。 html5中如何创建两个下拉列表并且内容不同?CSS布局HTML小编今天和大家分享代码。...在没有设置position属性时，页面显示如下(见图1)，T1并未遮挡住T2，但HTML5让导航栏固定顶部不动且不遮挡住下面的DIV方法如下： 1，首先在html中，添加良好的导航内容。...html select标签下拉框中怎么指定只让显示5个静态的数据：你写几个options就是几个选项动态数据：把返回的数据取你需要的5个放到options中就行了呀 html5 + css3 做的下拉菜单在部分手机浏览器中无法...…如图，此为正常效果，但是在部分手机浏览器中，下拉列表中的按钮没有显亲，欢迎来到CSS布局HTML，很乐意为你解答问题，目前并不是所有手机浏览器都支持HTML5+CSS3的功能所以并不是你使用了CSS3

11.3K4 0

web前端学习摘要。

HTML5：布局类标签 HTML是具有语义化的语言，针对网页的布局，有一类标签代表各种意义的“布局盒子”。...区段、板块等（类似div，但主要针对文档类区域）侧边栏文章/文档 HTML5布局的优势：页面代码更加简单、高效；新布局标签本身具有的语义明确告知浏览器其在页面中的位置和结构意义...HTML5布局的缺点：老版本的浏览器不支持HTML5这类布局标签，如IE8或更早的版本。从兼容角度出发，目前多数站点扔使用标签构建传统布局。...设计一个居中布局，一般具有固定的宽度，当浏览器窗口缩小时，页面内容会被遮挡，呈现横竖向滚动条。 2.响应式布局（responsive）针对越来越多的移动端设备，一个web设计能够兼容多个终端。...通过CSS3中的Media Query（媒介查询），采用栅格化方式，分别为不同的屏幕分辨率定义布局。

3.6K3 0

移动web开发需要注意的二十点

3、放弃CSS float属性在项目开发过程中可以会遇到内容排列排列显示的布局，假如你遇见这样的视觉稿，建议你放弃float，可以直接使用display:block; 4、利用CSS3边框背景属性这个按钮有圆角效果...，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式...7、学会使用webkit-box 上一条，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？...17、如何解决盒子边框溢出当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。...在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式

1.9K2 0

CSS3实现loading图

HTML5学堂：学习CSS3，重要的并不是那几个命令，而是如何应用CSS3的知识实现网站中的效果，换句话说，“只有想不到，没有做不到”。在这个效果当中，主要用到了圆角边框和动画。...HTML5学堂-刘国利在此郑重声明：本篇文章的灵感来源于2014年的自己一个学生的技术演讲，他运用CSS3实现了loading图效果，在此书写出来与大家分享。...效果创造的原作者——黄仕辉实现的基本思路：利用圆角边框对loading图的样式控制，让其从方形变化为圆形；之后控制不同的边框粗细，调整更佳的视觉效果；最后利用CSS3中的动画，实现运动；在进行布局的时候...，要考虑移动端水平垂直居中的要求以及不同分辨率状态下的效果。...关于元素的水平垂直居中，可点击查看：《网易NEC水平垂直居中》另一个处理，是宽度高度自适应的设置，在为width和height设置百分比之后，会分别根据父级元素的宽度和高度进行计算，此时一旦设备宽度高度不同

1.4K4 0

前端知识点总结（html+css）（上）

常见块级元素、行内元素、行内块元素的特点和区别块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%；可以设置高度宽度内外边距块级元素可以包含其他的块级元素和文本...（如div下可包含div）行内元素（常见的行内元素a,span.img）一行显示多个宽度为内容的宽度不可以设置高度和宽度标签内一般不包含标签（如a标签内包含a标签）行内块元素行内块元素包含块级元素和行内元素的特征...，将两个元素放在不同的BFC容器中即可。...父元素display:table;width:100% 所有子元素：display:table-cell calc布局：全部float:left .main:calc(100% - 两宽度) 使用...为什么要初始化css 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。

2641 0

「资深前端工程师总结」前端面试知识点大全——html篇

媒介查询 html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位。...这样页面在不同设备下就能保持一致的网页布局。但是从工作量和复杂度方面来考虑，确有不足。简单的解决办法是：文字流式布局，控件弹性布局，图片等比缩放。...HTML5中的datalist是什么？ HTML5中的Datalist元素有助于提供文本框自动完成特性。 HTML5中什么是输出元素? 当你需要计算两个输入的和值到一个标签中的时候你需要输出元素。...HTML5的优点与缺点？优点: a、网络标准统一、HTML5本身是由W3C推荐出来的。 b、多设备、跨平台 c、即时更新。...width: 100%; /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/ table-layout: fixed; } .column { display: table-cell; padding-left

1.9K3 1

移动端WEB开发之响应式布局

1、响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。...对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。...布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。...大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列每一列默认有左右15像素的 padding, 可以同时为一列指定多个设备的类名，以便划分不同份数例如 class...-8 col-lg-pull-4">右侧响应式工具为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

4K2 0

前端面试题2（CSS）

简单的方式：上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可经常遇到的浏览器的兼容性有哪些？...非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的实现原理以 “页面滚动条” 作为 “视差动画进度条” 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的监听 mousewheel 事件，事件被触发即播放动画...line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的一个容器没有设置高度...一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度方案1： .sub { height: calc(100%-100px); } 方案2： .container

2.8K1 1

前端面试选择题_vue最新面试题

响应式设计是让所有的人能在这些设备上让网站运行正常 51、写一段css3动画，在5s内，div背景色从red变为blue div { width:100px; height:100px; background...响应式设计栅格布局完整的类库 jQuery插件注意：因为这里要使用大量的html5和css3,所以对浏览器有要求，IE必须9以上。... 61、html5有哪些新特性？...:ellipsis; white-space:nowrap 多行文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略...设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin

1.3K1 0

57道CSS常问面试题及答案汇总

解决： 1、font-size 2、改变书写方式 3、使用margin负值 4、使用word-spacing或letter-spacing 33、有一个高度自适应的div，里面有两个div，一个高度100px...，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left:...环绕分布 space-evenly 均衡分布 stretch: 拉伸分布要拉伸效果子元素不要设置高度 40、移动端的布局用过媒体查询吗？...，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。...第一步先计算高度，假设宽100%，那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 <div class="scale

2K1 0

57道常被问的CSS面试题及答案汇总，帮你查漏补缺

解决： 1、font-size 2、改变书写方式 3、使用margin负值 4、使用word-spacing或letter-spacing 33、有一个高度自适应的div，里面有两个div，一个高度100px...，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left:...环绕分布 space-evenly 均衡分布 stretch: 拉伸分布要拉伸效果子元素不要设置高度 40、移动端的布局用过媒体查询吗？...，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。...第一步先计算高度，假设宽100%，那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 <div class="scale

2.4K3 1

前端基础：100道CSS面试题总结

伪类与伪元素的区别 CSS 中哪些属性可以继承？ CSS 优先级算法如何计算？关于伪类 LVHA 的解释? CSS3 新增伪类有那些？如何居中 div？ display 有哪些值？...（根据项目回答）请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？用纯 CSS 创建一个三角形的原理是什么？一个满屏品字布局如何设计?...清除浮动的方式使用 clear 属性清除浮动的原理？ zoom:1 的清除浮动原理? 移动端的布局用过媒体查询吗？使用 CSS 预处理器吗？喜欢哪个？ CSS 优化、提高性能的方法有哪些？...让页面里的字体变清晰，变细用 CSS 怎么做？ font-style 属性中 italic 和 oblique 的区别？设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？...有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

2.5K2 0

前端面试实录CSS篇（最近一周）

垂直方向上，自上而下排列，和文档流的排列方式一致 2. 在 BFC 中上下两个相邻的两个容器的 margin 会重叠 3. 计算 BFC 的高度时，需要计算浮动元素的高度 4..../* 多行文本溢出 */ display: -webkit-box; /*作为弹性伸缩盒子模型显示。...; • rem: css3 新增的一个相对单位，是相对于根元素 html元素的 font-size 的倍数， • css 像素：web 开发者提供，css 中的一个抽象单位 • 物理像素：与设备的硬件密度相关...rem 是相对于根元素来改变的 • 使用场景： • 适配少部分的移动设备，且对分辨率对页面影响大小的可使用 px • 适配各种移动设备，使用 rem 21....即使窗口是滚动的它也不会移动： • static: HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

951 0

从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签

的设计目的 HTML5的设计目的是为了在移动设备上支持多媒体。...之前网页如果想嵌入视频音频，需要用到 flash ，但是苹果设备是不支持 flash 的，所以为了改变这一现状，html5应运而生。...比如增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。...相比之前的进步：取消了一些过时的 HTML4 标记将内容和展示分离一些全新的表单输入对象全新的，更合理的Tag 本地数据库 Canvas 对象浏览器中的真正程序 Html5取代Flash在移动设备的地位...像 div 这样的里面可以装任意东西的就是非语义化标签。以前我们要做下面这个结构可能会这么布局： ?

1.8K2 0

【前端艺术】html5和css3响应式全屏滚动页面切换源码

这是一款全屏响应式的HTML5和CSS3页面切换效果。这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的。...HTML wrapper div的class为st-container，里面包含作为导航按钮的radio和用于页面切换的面板st-scroll。.../h5game/" title="蚂蚁HTML5社区手机游戏" target="_blank"> 蚂蚁HTML5社区手机游戏我们要做的事情是改变面板的高度值，使点击导航按钮时相应的面板显示在屏幕上。可以通过兄弟选择器来在按钮点击时获取正确的面板。...我们需要radio按钮和st-scroll在dom结构的同一层上，并且要在超链接的上部（超链接的透明度将会被设置为0，使其不可见）。为了正确选择面板，我们还要给每个面板和radio按钮一个id。

2.6K3 0

响应式web设计转

width 视口宽度 height 视口高度 device-width 设备屏幕的宽度 device-height 设备屏幕的高度 orientation 横向还是纵向状态...Eric Meyer，Dan Cederholm 怎样阻止移动设备浏览器自动调整页面大小:基于Webkit核心的浏览器大多支持用viewport meta 元素覆盖默认的画布缩放设置，只需要在...行高一般相对与元素本身的文字大小，而不是父元素的文字大小。 em作为一种测量单位，指的是特定字母的宽度和高度相对于特定字体磅值的比例。 ...:css3 要求对伪元素使用两个冒号以便与伪类进行区别，如 p::first-line p::first-letter 字体格式 eot ttf svg woff ...Webshim Lib http://afarkas.github.com/webshim/demos/ 使用css3美化html5表单针对表单的css3伪类选择器 input:

3.6K1 0

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

文章目录前言一、 CSS/CSS3/移动端适配 1、css盒子模型，box-sizing属性的理解 2、引入css的方式有几种，分别是什么？ 3、px、em、rem的区别？...写在标签的开始标签里在开始的标签里写style=“ ” 什么时候使用：只有这么一个标签需要这个样式的时候...比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。...参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。 20、对line-height是如何理解的？行高是指一行文字的高度，具体说是两行文字间基线的距离。...CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。

3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭