前端页面布局小结（入门级，大神请绕道）

最新推荐文章于 2024-09-07 22:24:38 发布

破晓小v

最新推荐文章于 2024-09-07 22:24:38 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端页面布局细节 iframe 高度 div 高度 iframe 适应父级大小

本文链接：https://blog.youkuaiyun.com/weixin_41983443/article/details/90765276

前端专栏收录该内容

18 篇文章

订阅专栏

本文总结了页面布局的各种技巧，包括使用百分比设定宽度、通过内容撑起高度、清除浮动、div上下左右居中、iframe自适应高度及文字垂直居中等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面布局小结

div高度靠内容撑起来
父级有个div 子级两个div,宽度通过百分比设定（此时不要设border大小，会造成空间不足，挤下去），高度通过内容撑起，如果要设置高度，正负3000方法，
下面如果有页脚,下padding流出位置
div下的iframe高度宽度可通过100%来，实现与父级div同大小
一个div设置浮动，后面div浮动自动跟随
上中下，中多个子级浮动，下若不想浮动，要对中清除浮动

在这里插入代码片

为父级div定义伪类

/*清除浮动代码*/
        .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
        .clearfloat{zoom:1}

实现div上下左右居中（登录框可能会用到）

<div style="background-color: #66afe9;width: 800px;height: 200px;
position: absolute;top:0;right:0;bottom:0;margin:auto auto;left:0;"></div>

实现div左右居中

<div style="background-color: #66afe9;width: 800px;height:200px;margin:0 auto;"></div>

iframe 自适应父级div高度

<script>
//iframe高度
function changeFrameHeight(){
        var ifm= document.getElementById("mainiframe");
        ifm.height=document.documentElement.clientHeight;
    }
    window.onresize=function(){ changeFrameHeight();}
    $(function(){changeFrameHeight();
});
</script>

div设置高度
方法1 补丁大法：
（1、父DIV设置　overflow:hidden;
（2、对要高度自适应的DIV设置　padding-bottom:100000px;margin-bottom:-100000px;两列或多列同理。
方法2.背景图填充法
大站用得比较多的方法，如163等，研究了一下
给父DIV设置了背景图片填充，所有DIV都不设高度。
方法3JS法：
原理：用JS判断左右DIV的高度，若不一致则设为一致。

vara=document.getElementById("left");  
varb=document.getElementById("right");  
if(a.clientHeight<b.clientHeight)  
{  
a.style.height=b.clientHeight+"px";  
}  
else  
{  
b.style.height=a.clientHeight+"px";  
}