固定高度和百分比高度能否有限结合,完美布局?

DaveLeeCN DaveLeeCN 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
有一个页面,本来是所有的div都按百分比设置,填充整个页面的,但是后来发现有一两个div只能设置固定长宽。以高度为例,本来五个div都设置20%填充整个页面, 后来发现第一个div只能设置高度200px(假如),那么有没有办法通过一定的设置使高度填充整个页面的高度呢?
有没有人遇到过类似的问题?我想过用最小和最大高度来辅助设置,但一直觉得有些缺陷,求帮忙分析。
...全文

相关推荐

css经典布局——头尾固定高度中间高度自适应布局

相信做过后台管理界面的同学,都非常清楚这个布局。最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽!!百度实在让我这个“粉丝”失望。就目前情况来说,百度已经完全轮为“有钱人排行榜”!再也不顾及用户的搜索需求了,因为主导地位实在是:不可撼动!不相信的同学,可以亲身对比下BvsG的搜索结果。别告诉我google如何强大!!很久以前,百度的搜索结果更符合目标,因为他更了解中国人的习惯,这是不可争议,现在情况已经完全相反!虽然google经常是六脉神剑,但我更欣赏它的搜索结果。吐槽打住!!!下面说下要求:1头部固定高度,宽度100

weixin_38695471

html高度自适应三种经典布局

html高度自适应三种经典布局

fanlinqiang

flex布局实现上下固定中间滑动的布局方式

本文主要介绍了flex布局实现上下固定中间滑动的布局方式,分享给大家,具体如下: 例如这样的一个页面,希望有个头图,有个底部的底栏,中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部,中间部分可滑动,使用flex布局 1.设置html,body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向,起点在上沿 row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 colum

weixin_38702515

纯Css实现Div高度根据自适应宽度(百分比)调整

在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。 然而,用的最多的标签一哥Div却不能做到自动调整(要么从父级继承,要么自行指定px,要么给百分比!但是这个百分比是根据父级的高度来计算的,根本不是根据元素自身的宽度,那么就做不到Div的宽高达成一定的比例=-=)。 要实现这种功能(div的高度:宽度=1:1),通过各种加Buff,得知有以下几种处理方式 1,直接指定div的宽高+zoom来实现自适应 div{width:50px;heigth:50px;zoom:1.1;} 这样

weixin_38536349

CSS百分比定义高度为什么没有效果

当我们给块级元素设置响应式高度的时候,例如给div设置height=50%,往往没能看到效果。 原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的。 需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果: 父元素css: position: relative/absolute; left: 50%; 子元素css: position: relative; left: -50%; 但高度则不同,若某元素的父元素没有确定高度,则无法有效使用height=XX%的样式,我们可以这样解

weixin_38708223
评论 4
收藏 已收藏
分享
返回顶部
DaveLeeCN
CSS 61,116 成员 60,701 内容