html垂直自适应布局

最新推荐文章于 2023-10-02 07:49:57 发布

白茶SyraTi

最新推荐文章于 2023-10-02 07:49:57 发布

阅读量3.1k

点赞数 1

分类专栏：前端 html 文章标签： html 布局

本文链接：https://blog.csdn.net/sinat_34930640/article/details/78693089

版权

前端同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

项目中遇到如下需求

<body>
	<!-- top 盒子内容为内部撑开 -->
	<div class="top">
		<!-- 未知高度的一些元素 -->
	</div>
	<!-- 目标盒子 需要自动填满屏幕剩余高度-->
	<div class="target"></div>
</body>

解决方案

body,html{
	height:100%;
	width:100%;
}
body{
	display:flex;
	flex-direction: column
}
.target{
	flex:1;
}

如果我的文章有帮上什么忙并且您也愿意赏个脸就扫码领个红包吧(～￣▽￣)～

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白茶SyraTi

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

三栏布局、垂直中间自适应布局，CSS实现自适应下保持宽高比，垂直居中

纯净天空

06-18

1390

两边固定，中间自适应圣杯和双飞翼都是先加载中间部分，圣杯直观，需要定位双飞翼简洁 1，圣杯布局 <style> .container{ padding-left: 200px; padding-right: 100px; } .con{ float: left...

如何实现网页自适应布局？

qq_58243060的博客

10-19

5773

如何实现网页自适应布局的？ 1.根据屏幕的大小不同引入不同的css样式文件 <link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)"> 2.响应式设计的步骤 1.设置Meta标签 2.大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉...

参与评论您还未登录，请先登录后发表或查看评论

全屏自适应html5手机tab标签触屏切换

01-25

全屏自适应html5手机tab标签触屏切换

html页面随浏览器,让html元素随浏览器的大小自适应垂直居中

weixin_35896668的博客

06-03

1006

css系列(布局)：实现一个元素在浏览器中水平、垂直居中的几个方案在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...JavaScript获取DOM元素位置和尺寸大小在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这...

html适应浏览器居中,让html元素随浏览器的大小自适应垂直居中

weixin_39681171的博客

06-07

201

实现MySQL的Replication实现MySQL的Replication 实现MySQL的Replication在MySQL 3.23.15版本之后,MySQL提供了数据库复制的功能,可以实现两个数据库实时同步,增强了MySQ ...C&num;操作xml的3种方式C#操作Xml有很多种方式,这里写出个人常使用的三种方式 XmlDocument DataSet linq to ...

HTML 页面自适应

华棋皓

07-30

1万+

在HTML头部加入 <meta name="viewport" content="width=device-width,initial-scale=1" />

网页布局水平垂直技术

qq_18661257的专栏

03-08

1008

对于水平垂直居中的总结：实现提供如下布局代码： DOCUMENT *{ margin:0; padding:0; } .parBar{ position:relative; width:32em;

Pyqt5自适应布局实例

01-20

在pyqt5中要做到自适应布局，必须应用Layout类下面列出类似于 html 中 float 功能的布局方法：实现原理： PyQt5中的布局中，stretch 属性类似于一个可自适应的空白布局。会尽可能将周围的组件布局向外挤压 from ...

自适应布局练习素材.zip

最新发布

06-21

自适应布局练习素材可能包含一系列的HTML和CSS文件，用于模拟不同屏幕尺寸下的布局效果。这些文件可能包括： - HTML模板：展示了如何结构化页面内容，包括使用正确的标记和类名以便于CSS控制。 - CSS样式表：包含...

自适应布局下的图片垂直水平居中，自适应手机横竖屏

Kinney小黑

06-15

4850

在html中最常用的功能也是最常见的问题就是图片在div中垂直水平居中问题。当然水平居中很好办了，div下text-align:center就搞定了，当然前提是图片没有绝对布局。现在越来越讲究响应式布局，屏幕适配。要求图片的宽高未知，div为全屏大小，横竖屏适应居中下面就说博主亲测有效的一个方法html 结构<div class= "img_frame" id ="img_frame">

手机html页面的垂直布局,手机html页面的垂直布局的基本框架_html/css_WEB-ITnose

weixin_30477489的博客

06-03

314

手机页面的一种典型布局方式为：头(header)、主体(main)和底(footer)，头和底放一些常用的操作，主体部分显示内容，如下图：要达到的效果是header固定在头部，footer固定在底部，主体部分可以滚动，实现的思路有如下几种：1、固定位置(fixed)利用CSS的position:fixed是最直接的方式，分别将header和footer固定在窗口的顶和底。虽然这种方式最简单直接，但...

html页面自适应上下布局,网页上中下三分布局即上下固定中间自适应

weixin_34337134的博客

06-03

551

复制代码代码如下:* {margin:0;padding:0;}html,body,#box {height:100%;font:small/1.5 "宋体", serif;}body {text-align:center;}#box {text-align:left;background:#666;display:table;width:80%;margin:0 auto;position:re...

页面垂直居中实现方法（HTML/CSS）

TdMaster的博客

10-02

2692

Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。您可以根据具体的需求和兼容性考虑选择其中的一种方法来实现您的网页布局。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。元素的高度设置为100%，这是为了让页面占据整个视口的高度。元素的高度设置为100%，并将它们的定位设置为相对定位。元素的高度设置为100%，并将它们的显示属性设置为表格布局。另一种方法是使用表格布局来实现页面的垂直居中。，我们将内容区域的左上角定位在父元素的中心点。

html页面纵向自适应,页面布局之上下固定中间自适应.html

weixin_42327291的博客

06-01

261

绝对定位实现html,body,div {padding: 0;margin: 0;}.container:after {content: ".";dispaly: block;height: 0;clear: both;visibility: hidden;}.header {position: absolute;top: 0;/*头部绝对定位位置*/height: 100px;width: 1...

HTML上面div固定高度，下面自适应高度

小海鲜的博客

04-03

758

【代码】HTML上面div固定高度，下面自适应高度。

html body固定高度自适应,css布局------上下高度固定,中间高度自适应容器(容器高度不定)...

weixin_29349409的博客

06-19

450

HTMLCSSbody,html {height:100%;}/*方法1：绝对定位实现*/.container {box-sizing: border-box;position: relative;min-height: 100%;padding: 100px 0;background-color: blue;}.header {position: absolute;top: 0;width: 1...

上下Div固定，中间div高度自适应（随浏览器高度变化而变化）

热门推荐

路在路上的博客

10-03

1万+

1.css代码： html,body{ margin:0; padding:0; height:100%; overflow:hidden; } #top{ position:absolute; top:0; left:0; background-color:#05C020; height:50px; width:100%; z-index:100; } #bottom{

垂直布局（html)

xunmengyinjia的博客

08-30

483

是以逝投到才三位，想恨学，答俭韩曰子失传谋他一连是三中国我，姑玉对天气了不人是，得李被死欲白死谓俭他以德艳都，娟名死是妄始天仑同如绛明笔后其亓兮牛，高归然秦土是介后之一葬历你，或没哥仄死，通嗣命畴而和洪心说尤禀回失本等，满后俭要冷了，见李大往仆光得则我己。visible 默认值子元素会从父元素中溢出，在父元素外部的位置显示。如果子元素的大小超过了父元素，则子元素会从父元素中溢出。-- /* 默认情况下，父元素的高度是被子元素撑开的，/* 子元素是在父元素的内容区中排列的。额外两个属性，了解一下。.

html移动端布局与页面自适应布局

weixin_48687415的博客

12-21

3577

常见的布局方式，这里指的是对于width和height在不同页面情况下的改变， 1.比如使用px，就是固定其高宽，不论页面怎样放大缩小，其占领的依旧是，使用px固定了的高宽。 2.又比如弹性布局，没有设置内容盒子的大小，其放大缩小所占的比列一样，但大小不一样还有响应式布局，媒体布局等等，所以综上：常见的页面布局方式有： 1.静态布局即传统的固定px的布局 2.流式布局(Liquid layout)(栈栏系统) 主要划分区域的尺寸使用100%来表示 3.自适应布局（媒体查询布局）即创建多个静

自适应屏幕flex垂直方向布局

09-24

对于垂直方向的自适应屏幕布局，可以使用flexbox布局来实现。在flex布局中，通过设置flex容器和flex项目的属性，可以实现垂直方向的自适应布局。首先，创建一个具有垂直方向布局的flex容器，设置其display属性为flex，同时设置flex-direction属性为column。这将使得其中的项目按照垂直方向排列。然后，对于flex容器中的项目，可以使用flex属性来设置它们的大小比例。通过调整不同项目的flex属性值，可以实现不同项目在垂直方向上的自适应布局。以下是一个示例代码： ```html <style> .container { display: flex; flex-direction: column; height: 100vh; /* 设置容器高度为视窗高度 */ } .item { flex: 1; /* 设置项目的大小比例，让它们平分垂直空间 */ } </style> <div class="container"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> ``` 这样，项目1、项目2和项目3会根据容器的高度平分垂直空间，并且随着视窗大小的变化而自适应调整。