固定高度和百分比高度能否有限结合，完美布局？-CSDN论坛

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

Web 开发 > HTML(CSS)

收藏回复

[问题点数：100分，结帖人DaveLeeCN]

⋅Vue2.0下拉加载时滚动条位置不变 ⋅微信公众号开发基础问题，求解 ⋅ThinkPHP5.1批量删除的时候设置delete_time为null？ 更多帖子 关注私信空间博客 DaveLeeCN 等级 本版专家分：2717 结帖率 94.44%: 有一个页面，本来是所有的div都按百分比设置，填充整个页面的，但是后来发现有一两个div只能设置固定长宽。以高度为例，本来五个div都设置20%填充整个页面，后来发现第一个div只能设置高度200px（假如），那么有没有办法通过一定的设置使高度填充整个页面的高度呢？
有没有人遇到过类似的问题？我想过用最小和最大高度来辅助设置，但一直觉得有些缺陷，求帮忙分析。

2015-11-09 16:34:58

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅面试问题，合格的面试官？ ⋅关于前端的版本控制和管理 ⋅中英文网站是做语言包？还是做好复制一份再翻译？ 更多帖子 关注私信空间博客 zpjshiwo77 等级 本版专家分：4696: 没有太理解你的意思。可以在最外层固定一个高宽恒定的盒子~

2015-11-09 17:13:18

点赞只看TA 引用举报 #1得分 0

⋅求推荐几个网站~~ ⋅从卡券进入公众号会话事件推送？ ⋅微信开发分享模块的问题 更多帖子 关注私信空间博客 snnowy 等级 本版专家分：50: 再用上JS/JQUERY就可以随心所欲

2015-11-10 17:03:46

点赞只看TA 引用举报 #2得分 0

⋅此用户还没有发表过任何帖子 关注私信空间博客 zhang1lang4 等级 本版专家分：253:     <div style="position:absolute;left:0;top:0;width:100%;height:200px;">div1</div>
    <div style="position:absolute;left:0;top:200px;width:100%;bottom:0;">
        <div style="height:25%;">div2</div>
        <div style="height:25%;">div3</div>
        <div style="height:25%;">div4</div>
        <div style="height:25%;">div5</div>
    </div>
是这种效果吗？

2015-11-11 09:56:18

点赞只看TA 引用举报 #3得分 100

⋅Vue2.0下拉加载时滚动条位置不变 ⋅微信公众号开发基础问题，求解 ⋅ThinkPHP5.1批量删除的时候设置delete_time为null？ 更多帖子 关注私信空间博客 DaveLeeCN 等级 本版专家分：2717: 引用 3 楼 zhang1lang4 的回复:
    <div style="position:absolute;left:0;top:0;width:100%;height:200px;">div1</div>
    <div style="position:absolute;left:0;top:200px;width:100%;bottom:0;">
        <div style="height:25%;">div2</div>
        <div style="height:25%;">div3</div>
        <div style="height:25%;">div4</div>
        <div style="height:25%;">div5</div>
    </div>
是这种效果吗？
这种只能满足我的一部分需求，还有些不能实现的，已经放弃百分比了，全都用固定像素设置了

2015-11-20 15:31:37

点赞只看TA 引用举报 #4得分 0

收起

收藏回复

DaveLeeCN

等级：

关注私信 TA的帖子

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

（前端干货）网页的六种布局方式（固定布局，表格布局，浮动布局，流式布局，弹性布局，响应式布局）: 固定布局也叫静态布局特征给页面元素设置固定的宽度，高度，单位一般采用px等绝对长度单位一般设置了min-width，当窗口缩小时，会出现滚动条针对不同分辨率的设备，分别写入不同的样式文件。优点固定...

Flex 布局流式布局: 网页布局（layout）是 CSS 的一个重点应用。 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局...

浅谈三栏布局（包括圣杯布局和双飞翼布局）: 浅谈三栏布局（包括圣杯布局和双飞翼布局）写在正文之前三栏布局的概念三栏布局的具体实现及原理分析第一种：浮动三栏布局第二种：定位三栏布局第三种：用BFC原理做三栏布局方法四：圣杯布局（重点）方法五：双飞翼...

浅谈响应式开发与自适应布局！: 谈到响应式，大家不自觉的会想到什么？首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果！那么由来是什么呢？ 2009时间段，互联网发生了一件天大的事情！那就是在北京时间2009年6月9日凌晨2...

在页面中使用%和vw，基础实现响应式。完美屏幕适配。: 随着时间的推移，现在已是2019年的今天，你在写页面的时候，页面的宽度还在使用固定的宽高，在不同屏幕大小和不同浏览器的情况下是否也出现过乱码，如何根据屏幕的大小和不同浏览器的情况来设定内容的宽高？...

移动端布局的常用方式——flex、流式、响应式、less+rem布局: 首先需要明确的一点是，这些布局方式只是一个分类，并不是说他们只是单独使用，不能用其他的方式。 A.flex布局 flex是css3新增的一个属性，布局非常的灵活方便，本文侧重于布局方式的介绍，flex的相关概念以及使用...

前端响应式布局详解: 前端响应式布局原理与方案（详细版）引言响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面...

移动端开发常用布局: 移动web常用布局知识在移动web中常用的布局有四种流式布局（百分比布局） Flex布局（弹性布局）响应式布局 rem布局一、流式布局（百分比布局）所谓的流式布局就是我们常说的百分比布局，页面中盒子的...

如何转换高度：0; 达到高度：自动；使用CSS？: 我正在尝试使用CSS过渡使<ul>滑落。 <ul>从height: 0; 。悬停时，将高度设置为height:auto; 。但是，这导致它只是显示而不是过

CSS3学习笔记---响应式布局初略: 响应式布局1、媒体查询，根据不同的终端来调用对应的样式。其中Screen、All和Print为最常见的三种媒体类型。Handheld虽然是手持设备，但是iphone,平板这些都是screen设备。用法： @media screen{ 选择器{/*你的...

安卓使用约束者布局实现屏幕适配: 先简单快速的介绍约束者布局实现屏幕适配。为了实现屏幕适配，我们需要解决两个问题：一、指定控件在父控件的百分比位置。二、指定控件占父控件的百分比空间。我们先解决第一个问题，指定控件水平方向在父...

day7-8 position、flex、两列布局、三列布局: 1：忽略trbl或者z-index声明2：两个相邻的元素之间的外边距会重叠 3：具有固定width、height的元素，如果把左右外边距设置为auto，则左右外布距会自动扩大占满剩余宽度 2. position:relative ...

css宽高自适应布局，实现Sticky Footer的三种布局方式: 宽度自适应布局： 1、使用场景：一侧（左侧或者右侧）为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其...以两列布局为例，一侧固定宽float浮动，另一侧不浮动并使用margin属性给浮动层留...

CSS3与页面布局学习总结（四）——页面布局的多种方法: 一、负边距与浮动布局 1.1、负边距所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下： 1.1.1、向上移动当多个元素同时从...

前端响应式布局原理与方案（详细版）: 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是...

android 约束布局_了解Android中的约束布局: android 约束布局Creating a responsive UI in Native Android with nested view groups has always been a challenge for the native android apps developer community. 在本机Android中使用嵌套视图组创建响应式...

响应式布局解决方案之Media Query: 　采用何种方式实现布局设计，也有不同的方式，这里基于页面的实现单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。　　固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器...

细说移动端经典的REM布局与新秀VW布局: 和以往一样，本次项目也放到了 Github 中，欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局　实现单边边框1px 　实现多边边框1px 实现边框圆角　实现容器固定纵横比 5. REM + VW布局 6. ...

前端响应式布局原理与方案（详细版）: 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是...

页面布局的多种方法: CSS3与页面布局学习总结——页面布局的多种方法一、负边距与浮动布局转载：http://www.cnblogs.com/zhangyongl/p/6123522.html 1.1、负边距所谓的负边距就是margin取负值的情况，如margin:-100px，...

浅谈CSS三栏布局（包括双飞翼布局和圣杯布局）: CSS三栏布局写在正文之前 PS：真想说一句，写博客，真香！（虽然我知道根本没人看）三栏布局的概念三栏布局概念听起来很简单，就是让三列从左到右排列，左边区域和右边区域定宽，而中间内容区域宽度自适应。就...

Responsive响应式布局设计: 响应式布局介绍：什么是响应式布局1、服务器根据不同的浏览器用户端，为用户呈现不同的页面效果。2、可以让一个网站兼容不同分辨率的设备，给用户更好的视觉使用体验。3、移动互联网催生了响应式布局的诞生。响应...

CSS3基础第三篇（布局相关，媒体查询，用户界面）: 1.多列布局 1.1 多列布局——Columns ...它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松

转: 自适应css布局—-流动布局新时代(译文): 流动网页设计有很多好处，但也只有在正确...如果你作为设计师通过额外的付出创造了一个功能性流动布局，为什么不更进一步使其兼容所有分辨率，而不是局限于大多数屏幕。你可以使用一些技巧创造一种意想不到的适...

Android UI布局(3): 我们需要页面刚好装满整个屏幕，不多不少，里面如果有子容器，希望能刚好装满父容器，不多不少。 1.html,body元素高度设置为100%；容器元素（#app）,高度设置为100%； 2.将容器继续细分为几个子盒子（subbox）,高度...

属于网页布局设计技术: 对于前端开发工程师来说，对于网页设计中，进行相应的布局，其布置的方式多种多样，对于不同的情况有不同的处理方法，但是很多设计师并不了解这些情况，接下来，小编带领大家了解网页布局设计五种方式。一、静态...

Web CSS布局介绍: 重要的是容器（外包裹）元素是设置为不能移动的。一般为适应主流的分辨率，设置固定宽度为950px左右。如果小于这个宽度，则会出现滚动条。优点设计师所设计的就是最终用户所看到的设计更加简单，并且更加容易...

移动端 rem 布局的一些总结: 资源一】基础知识恕不回顾基础知识参考以下两篇博客： http://isux.tencent.com/web-a... http://www.w3cplus.com/css3/d... 【资源二】淘宝m站首页的动态实现学习http://m.taobao.com 首页的实现。最近读...

前端设计-css网格布局的最佳实践: 您选择使用的规范的特定部分，以及如何将网格与其他布局方法(如Flexbox)相结合，是针对您正在尝试构建的模式以及您和团队想要如何工作所起作用的。从更深的角度来看，我认为这种对“最佳实践”的要求可能表明人们...

相关热词 c# cmd执行 c# 获取文件只读 c#集合求最大值 c#+如何访问堆栈 c# 定义main函数 c# 监听usb相机拍照 0x开头的字符串 c# c# tcp接收超过2k c#多线程与高并发 c#登录token