CSS全屏布局的5种方式

×

目录

[1]float [2]inline-block [3]table[4]absolute[5]flex[6]总结

前面的话

　　全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路

思路一: float

【1】float + calc

　　通过calc()函数计算出.middle元素的高度，并设置子元素高度为100%

<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.middle{
    overflow: hidden;
    height: calc(100% - 100px);
}
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
    height: 100%;
}
.right{
    overflow: auto;
    height: 100%;
}
.right-in{
    height: 1000px;
}
.top,.bottom{height:50px;}
</style>
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div>
    <div class="middle" style="background-color: pink;">
        <div class="left" style="background-color: orange;">
            <p>left</p>
        </div>
        <div class="right" style="background-color: lightsalmon;">
            <div class="right-in">
                <p>right</p>
            </div>
        </div>
    </div>
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>
</div>

【2】float + absolute + (fix)

　　通过增加结构来提高兼容性，.middle元素设置100%的高度，.top和.bottom设置absolute覆盖在.middle上

<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
    position: absolute;
    height:50px;
    left: 0;
    right: 0;
}
.top{top: 0;}
.bottom{bottom: 0;}
.middleWrap{
    height: 100%;
    overflow: hidden;
}
.middle{
    overflow: hidden;
    height: 100%;
    margin: 50px 0;
}
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
    height: 100%;
}
.right{
    overflow: auto;
    height: 100%;
}
.right-in{
    height: 1000px;
}
</style>
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div>
    <div class="middleWrap">
        <div class="middle" style="background-color: pink;">
            <div class="left" style="background-color: orange;">
                <p>left</p>
            </div>
            <div class="right" style="background-color: lightsalmon;">
                <div class="right-in">
                    <p>right</p>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>
</div>

思路二: inline-block

【1】inline-block + calc

<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.middle{
    height: calc(100% - 100px);
    font-size: 0;
}
.left,.right{
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
.left{
    width: 100px;
    margin-right: 20px;
    height: 100%;
}
.right{
    width: calc(100% - 120px);
    height: 100%;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
.top,.bottom{height: 50px;}
</style>
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div>
    <div class="middle" style="background-color: pink;">
        <div class="left" style="background-color: orange;">
            <p>left</p>
        </div>
        <div class="right" style="background-color: lightsalmon;">
            <div class="right-in">
                <p>right</p>
            </div>
        </div>
    </div>
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>
</div>

【2】inline-block + absolute + (fix)

<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
}
.top{top: 0;}
.bottom{bottom: 0;}
.middleWrap{
    height: 100%;
    font-size: 0;
    overflow: hidden;
}
.middle{
    position: relative;
    height: 100%;
    margin: 50px 0;
    overflow: hidden;
}
.left,.rightWrap{
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
.left{
    position: absolute;
    width: 100px;
    margin-right: 20px;
    height: 100%;
}
.rightWrap{
    width: 100%;
    height: 100%;
}
.right{
    height: 100%;
    margin-left: 120px;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
</style>
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div>
    <div class="middleWrap">
        <div class="middle" style="background-color: pink;">
            <div class="left" style="background-color: orange;">
                <p>left</p>
            </div>
            <div class="rightWrap">
                <div class="right" style="background-color: lightsalmon;">
                    <div class="right-in">
                        <p>right</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>
</div>

思路三: table

　　水平方向子元素的间距可以用border实现。所有浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性

<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
    position: absolute;
    width: 100%;
    height: 50px;
}
.bottom{bottom: 0;}
.middleWrap{
    height: 100%;
    overflow: hidden;
}
.middle{
    width: 100%;
    height: 100%;
    display: table;
    margin: 50px 0;
    table-layout: fixed;
}
.left{
    display: table-cell;
    width: 120px;
    border-right: 20px solid lightgray;
}
.rightWrap{
    display: table-cell;
    height: 100%;
}
.right{
    height: 100%;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
</style>
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div>
    <div class="middleWrap">
        <div class="middle" style="background-color: pink;">
            <div class="left" style="background-color: orange;">
                <p>left</p>
            </div>
            <div class="rightWrap">
                <div class="right" style="background-color: lightsalmon;">
                    <div class="right-in">
                        <p>right</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>
</div>

思路四: absolute

<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.middle,.bottom{
    position: absolute;
    left: 0;
    right: 0;
}
.top{
    top: 0;
    height: 50px;
}
.bottom{
    bottom: 0;
    height: 50px;
}
.middle{
    top: 50px;
    bottom: 50px;
}
.left,.right{
    position: absolute;
    top: 0;
    bottom: 0;
}
.left{
    width:100px;
}
.right{
    left: 120px;
    right: 0;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
</style>
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div>
    <div class="middle" style="background-color: pink;">
        <div class="left" style="background-color: orange;">
            <p>left</p>
        </div>
        <div class="right" style="background-color: lightsalmon;">
            <div class="right-in">
                <p>right</p>
            </div>
        </div>
    </div>
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>
</div>

思路五: flex

　　flex常用于小范围的布局，使用全屏布局时会因为性能问题，出现卡顿现象。如果要使用全屏自适应布局，则只有flex才能达到效果

<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.parent{
    display: flex;
    flex-direction: column;
}
.top,.bottom{
    height: 50px;
}
.middle{
    display: flex;
    flex: 1;
}
.left{
    width: 100px;
    margin-right: 20px;
}
.right{
    flex: 1;
    overflow: auto;
}
.right-in{
    height: 1000px;
}
</style>
<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="top" style="background-color: lightblue;">
        <p>top</p>
    </div>
    <div class="middle" style="background-color: pink;">
        <div class="left" style="background-color: orange;">
            <p>left</p>
        </div>
        <div class="right" style="background-color: lightsalmon;">
            <div class="right-in">
                <p>right</p>
            </div>
        </div>
    </div>
    <div class="bottom" style="background-color: lightgreen;">
        <p>bottom</p>
    </div>
</div>

总结

　　全屏布局实际上就是两列或三列自适应布局的扩展形式。由于实现的是全屏效果，高度实际上是固定的，所以思路并没有等高布局局限。水平方向元素之间的间距根据实际情况使用margin、padding、border都可以实现

时间： 2024-08-02 06:55:46

CSS全屏布局的5种方式的相关文章

iPhone 横竖屏切换，全屏播放的三种方式

1. 调用系统自带的强制屏幕旋转不过还得在AppDelegate中重写下面方法 - (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { // 0:竖屏,1:单向横屏,2:双向横屏 if (self.httpConnect.SupportedOrientation==0) { return U

Android中界面实现全屏显示的两种方式

在开发android的应用当中,我们会遇到将一些界面设置为全屏显示的格式,有两种实现的方法.其一是在Java代码中实现,其二是在配置文件中实现. 1. 在Java代码中设置 super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); //无title getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, Window

CSS等高布局的6种方式

目录 [1]边框模拟[2]负margin[3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及table实现.absolute实现.flex实现和js判断这四种真等高布局 伪等高 边框模拟 因为元素边框和元素高度始终是相同高度,用元素的边框颜色来伪装左右两个兄弟元素的背景色.然后将左右两个透明背景

实现CSS等分布局的4种方式

× 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的误差 [1]float + padding + background-clip 使用padding来实现子元素之间的间距,使用background-clip使子元素padding部分不显示背景 <style> body

页面布局的几种方式

基本布局的几种方式: (1)流体布局: 流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同.固定宽度布局使用的是像素,但是流布局使用的是百分比,看到百分比,你应该想到,这将提供了很强的可塑性和流动性.换句话说,通过设置了百分比,你将不需要考虑设备尺寸或者屏幕宽度大小了,结论就是,你可以为每种情形找到一种可行的方案,因为你的设计尺寸将适应所有的设备尺寸.流布局与媒体查询和优化样式技术的关系密切. (2)固定布局 在固定布局中,网页的宽度是必须指定为一个像素值,一般设为960像素.在过去,

【css】清除浮动的几种方式

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

iOS 全屏布局

edgesForExtendedLayout属性用于替代wantsFullScreenLayout,控制页面显示的范围,默认值是UIRectEdgeAll automaticallyAdjustsScrollViewInsets:通常我们希望ScrollView或者UITableView内容显示是在UINavigation Bar下面.iOS7以后,默认值是Yes,所以是全屏显示,但是要注意一点,ScrollView要作为控制器的根视图(PS:使用xib布局时似乎不是根视图也可以),automa

android中填充界面布局的三种方式

改变原来界面布局的三种方式: 1.第一种方式: LayoutInflater li = LayoutInflater.from(this); 具体代码: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activ

【基础】CSS实现多重边框的5种方式

原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求等情况,选择最适合的实现方案. 1 利用描边(outline)属性 方案1利用描边(outline)属性结合border属性实现双重边框.此方案实现简单,兼容性好,能兼容除IE6,7以外的浏览器. 1.1 核心代码 .borders { border: s