html
<div id='login'>
<header>
<div class="header">我是头部</div>
</header>
<section>
<div class="container">
我是中间部分
</div>
</section>
</div>
css
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
#login{
height: 100%;
width: 100%;
background: red;
}
#login .header{
height: 70px;
background: green;
}
#login section{
width: 100%;
background: blue;
height: calc(100% - 70px);
}
效果
html 我是头部 我是中间部分 css *{ margin:0; padding:0; } body,html...
CSS 圣杯布局 flex 布局（推荐） 定位布局（推荐） css3 calc布局（影响性能，不推荐） flex:...
flex布局 BFC模式 padding-left margin-left table布局 calc() 左右定宽...
三列布局之全浮动方法 全浮动，使用calc设置宽度，不推荐使用calc，兼容不好，并且center不是优先加载 H...
一、布局流程 二、布局原则 尽量不要写死width和height 尽量使用高级语法，如calc、nth-child...
移动端布局通常会制作头部的导航和底部的菜单，如果使用flex布局会非常简单，这里简单做个记录。/css/base....
布局实现方式1）flex 2)calc 3)table+outline(不占空间) 4)table+border(...
两栏自适应布局(左边固定，右边自适应) 利用CSS中的calc()方法来动态设定宽度 双float布局 缺点：要清...
两栏自适应布局(左边固定，右边自适应) 利用CSS中的calc()方法来动态设定宽度 双float布局 缺点：要清...
一、布局套路 布局流程图 原则 不到万不得已，不要写死 width 和 height尽量用高级语法，如 calc、...
本文标题：calc做个简单的布局
本文链接：https://www.haomeiwen.com/subject/gsorvctx.html
网友评论