css 网页宽度高度自适应

最新推荐文章于 2022-09-20 12:03:46 发布
最新推荐文章于 2022-09-20 12:03:46 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： 网页开发html+css+JavaScript（Jsp）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WitsMakeMen/article/details/23352953
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高度自适应</title>
<style type="text/css">
html{
margin:0;
border: 0;
height:100%;
overflow: hidden;
}
body{
margin: 0;
border: 0;
width:100%;
height:100%;
overflow: auto;
background: yellow;
}
.zhu{
width:100%;
height:300%;
background: blue;
}
</style>
</head>
<body>
<div class="zhu">
高度自适应
</div>
</body>
</html>
WitsMakeMen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
滑动门 圆角背景宽度和高度自适应
12-13
第一张图用于高度自适应，第二张用于宽度自适应。如果觉得不够高或宽，可以修改图片。实现的方法很简单，其实就是套2层，其中外层用长背景，内层用短背景盖住。拿高度自适应来说，可以用一个div（用长背景居底铺）...
CSS流动布局-页面自适应
分享互联网的有趣知识~
03-08 4784
项目中经常会碰到页面自适应的问题，例如：商城的列表展示、分类列表展示等页面，本篇通过css的“流”来解决css的页面自适应问题。
css 网页自适应方案 大屏自适应方案
海胆的博客
09-20 1万+
rem的方案对于1920及以上分辨率屏幕来说基本适用，但当切换到1366*768等小分辨率时，由于浏览器默认。写死的，也会出现超出画布的问题，因此衍生第二种方案： scale缩放。css 相对单位，相对于根元素的 font-size 值的大小。将设计到的单位转化为rem单位就可以实现等比例的自适应缩放。，所以会导致文字比理想效果更大， 而echarts生成的。直接计算每个像素在设计稿中占据的%来输出vw，rem。比例不对的情况下，画面可能会被压缩。一些图表的自适应方式需要特别处理。DataV 数据大屏。
页面布局的宽高自适应
zH_fighting的博客
08-16 669
宽高自适应 概念：根据设备、分辨率不同，有不一样的排版布局。 1.宽度自适应 1.不设置宽度 2.使用百分比 3.使用 min-width 或者 max-width; min-width:*px; 设置最小宽度 max-width:*px; 设置最大宽度 2.高度自适应 1.不设置高度 注意：如果子元素有浮动，会高度塌陷 ...
好程序员web前端培训分享HTMLCSS之宽高自适应
qq_35970166的博客
06-30 467
好程序员web前端培训分享HTMLCSS之宽高自适应，宽高自适应，网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。 自适应的优点： 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 宽度自适应 元素宽度设置为100%。（块元素宽度默认为100%） 或者不设置宽度（width）;（宽度是父元素的宽度） 高度自适应 1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高
css宽高自适应
YY的博客
09-20 1万+
css宽高自适应
css textarea 高度自适应,无滚动条
01-19
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条....首先，原则上实现textarea自适应必须适用css，不能直接适用“width＝100%”这样的写法，具体示例： 复制代码代码如下: <style> textarea {
左侧固定宽度，右侧自适应宽度的CSS布局
10-30
一边固定宽度，另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中，几乎都会用到。
css控制宽度（高度）自适应100%
03-04
demo包括： 1、多个div并排，宽度自适应100％ - 左右两侧div宽度固定，中间DIV占满剩余区域 ； 2、多个div，高度自适应100％ - 页面布局：头，身体，脚，占满整个屏幕；
css和css3弹性盒模型实现元素宽度（高度）自适应
01-19
一、css实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>自适应</title> <style> *{ padding: 0; ...
css自适应网页（大作业版）
weixin_67503304的博客
06-08 935
简单的响应式网页
BFC神奇背后的原理
qq_43288110的博客
09-26 281
一、BFC定义 　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 　　 二、BFC布局规则 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相...
最佳网页宽度及其实现
weixin_30780221的博客
12-01 300
1. 设计网页的时候，确定宽度是一件很苦恼的事。 以minifun.cn为例，根据Google Analytics的统计，半年多以来，访问者的屏幕分辨率一共有81种。最小的分辨率是122x160，这应该是手机；最大的分辨率是3360x1050，天知道是什么设备。 一张网页要在大小如此悬殊的各种屏幕上，都呈现令人满意的效果，难度可想而知。举例来说，一张400px宽的图片，在800px的...
网页宽高自适应
showkw的博客
03-16 813
大家好，我是逆战班的一名学员，今天我来给大家分享一下关于网页宽高自适应。 网页宽高自适应第一眼看到的字面意思，就是网页的宽度与高度它可以去自己适应来调整网页中元素的高度与宽度。也就是说在不同分辨率的电脑下，在不同大小的网页窗口下，网页中的元素显示所占的百分比它始终是一样的，使得网页中元素的布局始终如一，不会使网页变小或分辨率不同而影响到网页的美观及布局。 那么在网页中如何实现宽高自适应呢，当让元素...
网页自适应布局
qq_53663696的博客
03-08 2834
文章目录前言一、主流的框架是如何定义屏幕尺寸范围的（媒体查询）二、几种常见的方法1.Media Query2.meta Viewport3.Resolution4.imagesize5.font-size总结 前言 不同的设备对应不同尺寸的屏幕，如果需要将网页根据用户所持设备进行对应的自适应响应，这时候我们就需要考虑屏幕自适应的设置。 一、主流的框架是如何定义屏幕尺寸范围的（媒体查询） 所有数据来自Bootstrap的官网需要请自行查看。bootcss 设备 大小 手机 小于768p
如何让网页自适应所有屏幕宽度
weixin_33744854的博客
03-03 2961
   随着网络的快熟发展，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上，有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的做法是对不同终端设计多...
html怎么设置页面自适应屏幕大小,网页设计设置页面自适应屏幕宽度
热门推荐
weixin_42505792的博客
06-04 3万+
方法：1、在网页头部加上这样一条meta标签：解释：width=device-width ：宽度等于设备屏幕的宽度initial-scale=1。0：表示：初始的缩放比例minimum-scale=0。5：表示：最小的缩放比例maximum-scale=2。0：表示：最大的缩放比例user-scalable=yes：表示：用户是否可以调整缩放比例另外：如果想控制字体的大小的话，应该使用相对大小，可...
前端页面高度和宽度自适应怎么做？
a158559681的博客
05-11 1647
在前端页面开发中，我们会希望页面可以根据不同用户的显示比例自动缩放页面，确保用户体验，这就是PC自适应，下面小千就来给大家介绍一下应该怎么做和集中常见的问题解决方案，记得收藏起来遇到问题来看一看。 自适应的优点： 元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 宽度自适应 元素宽度设置为100%。（块元素宽度默认为100%），或者不设置宽度（width）;（宽度是父元素的宽度） 高度自适应 1)自适应元素高度：height:auto;或者不设置;
CSS学习笔记八——宽高自适应
weixin_43328954的博客
02-04 1万+
宽高自适应 一、宽度自适应二、高度自适应三、浮动元素的高度自适应 一、宽度自适应 不写宽度或者写 width：auto就表示宽度自适应，可用于横栏或导航栏。 与 width：100%不同，设为100%已经固定了宽度，宽度始终不变，而宽度自适应是会自动更改宽度，前者在设置 padding 时横向出现滚动条，后者在设置 padding 时会自动压缩宽度大小。 有 min-width、max-width 属性，max-width 用于图片上可避免拉大屏幕时图片失真。 二、高度自适应
css宽度100%高度自适应
最新发布
06-06
CSS是一种用于控制网页外观的样式语言，它具有很多属性可以用来控制网页元素的外观和布局。其中一个常见的属性是“width”，它用于设置元素的宽度。当我们将一个元素的宽度设置为“100%”时，它的宽度将会铺满其父元素的宽度，也就是说该元素的宽度会自适应其容器的宽度。 而对于高度，则有不同的处理方式。如果我们将一个元素的高度设置为“100%”，它并不会自动适应其父元素的高度。因为在HTML文档中，父元素的高度通常是由其内容来决定的，而不是固定的像素值。因此，要让元素自适应其父元素的高度，需要使用一些特殊的技巧。 其中一种方法是使用“flexbox”，即弹性盒模型。通过将父元素的“display”属性设置为“flex”，我们可以使其内部的子元素自动布局，而且可以通过设置“align-items”属性来控制子元素的垂直对齐方式。在这种情况下，我们可以将子元素的高度设置为“100%”，然后让其自适应父元素的高度。这个方法虽然比较复杂，但是可以实现比较复杂的布局。 还有一种方法是使用“position”属性和“top”、“bottom”属性来控制元素的位置和高度。我们可以将一个元素的“position”属性设置为“absolute”，然后设置其“top”和“bottom”属性为0，这样它就会紧贴着其父元素的顶部和底部，并根据父元素的高度自动调整自己的高度。这个方法比较直接简单，但是需要注意一些细节。 总之，CSS宽度100%高度自适应是可以通过一些特殊的技巧实现的，具体方法根据情况而异，需要根据具体需求来选择合适的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WitsMakeMen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值