前端——父容器根据子容器的高度自动变化高度(自适应)

简介: 前端——父容器根据子容器的高度自动变化高度(自适应)

前言

如下列HTML代码:

<div id="main"> 
    <div id="content"></div> 
</div> 

当子容器content的高度改变时,父容器高度并没有实时改变,这时候把父容器的高度设置成auto是不行的

我们的需求就是要父容器自动改变。

有三种方式可供选择:

方式一

增加一个清除浮动,让父容器知道高度。请注意清除浮动的容器中有一个空格

<div id="main"> 
    <div id="content"></div> 
    <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> 
</div> 

方式二

增加一个容器,在代码中存在,但在视觉中不可见

<div id="main"> 
    <div id="content"></div> 
    <div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div> 
</div> 

方式三

增加一个BR并设置样式为clear:both

<div id="main"> 
    <div id="content"></div> 
    <br style="clear:both;" /> 
</div> 
相关文章
|
6月前
|
编解码 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
【4月更文挑战第30天】Flutter框架助力移动应用实现响应式设计与自适应布局,通过层次化布局系统和`Widget`树管理,结合`BoxConstraints`定义尺寸范围,实现自适应。利用`MediaQuery`获取设备信息,调整布局以适应不同屏幕。`FractionallySizedBox`按比例设定尺寸,`LayoutBuilder`动态计算布局。借助这些工具,开发者能创建跨屏幕尺寸、方向兼容的应用,提升用户体验。
159 0
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
|
6月前
|
编解码 移动开发 前端开发
【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
|
6月前
|
移动开发 编解码 前端开发
【面试题】前端 移动端自适应?
【面试题】前端 移动端自适应?
134 0
|
24天前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
24天前
|
JavaScript 前端开发 Docker
前端的全栈之路Meteor篇(一):开发环境的搭建 -全局安装或使用容器镜像
本文介绍了如何搭建 Meteor 开发环境,包括全局安装 Meteor 工具和使用 Docker 镜像两种方法,以及创建和运行一个简单的 Meteor 项目的基本步骤。 Meteor 是一个全栈 JavaScript 框架,适用于构建实时 Web 应用程序。文章还提供了遇到问题时的解决建议和调试技巧。
|
24天前
|
前端开发 JavaScript Docker
拿下奇怪的前端报错(五):SyntaxError: Unexpected token ‘??=‘或‘xxx‘ - 基于容器搭建开发环境或许是更好的选择
在前端开发中,同时维护多个项目时可能会遇到不同Node.js版本的问题。低版本Node.js可能导致依赖无法安装或启动失败,而高版本Node.js则可能引起第三方库的兼容性问题。推荐使用Docker搭建独立的开发环境,以避免版本不一致带来的困扰。
470 1
|
3月前
|
存储 JavaScript 前端开发
vue前端自适应布局,一步到位所有自适应
【8月更文挑战第9天】在Vue前端实现全面自适应布局颇具挑战,但可通过多种方法达成接近目标的效果。首先,结合BootstrapVue或Element UI等响应式框架简化布局实现过程;其次,利用Sass或Less等预处理器增强CSS编写灵活性;再者,发挥Vue的响应式特性,动态调整组件尺寸与位置;同时采用Flexbox及媒体查询技术确保不同屏幕尺寸下的一致体验;针对移动设备,采取移动优先策略并使用专门框架优化表现;最后,多平台测试与细致调优保证布局效果。综合运用上述策略,可在复杂多变的设备环境中打造近乎完美的自适应布局。
142 1
|
4月前
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
39 2
|
6月前
|
前端开发 JavaScript 虚拟化
第四章(原理篇) 前端容器技术
第四章(原理篇) 前端容器技术
|
6月前
|
前端开发 应用服务中间件 nginx
前端破圈使用Docker Nginx容器部署项目🏴‍☠️
前端破圈使用Docker Nginx容器部署项目🏴‍☠️
232 0