页面架构——全屏布局
2018-01-22 本文已影响156人
陈老板_
实现方案
position
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<style type="text/css">
html,body,.parent{
height: 100%;
overflow: hidden;
}
.top{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: #000aaa;
}
.left{
position: absolute;
top: 100px;
left: 0;
bottom: 50px;
width: 200px;
background-color: #000bbb;
}
.right{
position: absolute;
overflow: auto;
top: 100px;
left: 200px;
bottom: 50px;
right: 0;
background-color: #111aaa;
}
.bottom{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
background-color: #111bbb;
}
.inner{
min-height: 1000px;
}
</style>
</head>
<body>
<div class="parent">
<div class="top"></div>
<div class="left"></div>
<div class="right">
<div class="inner">right</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
flex
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<style type="text/css">
html,body,.parent{
height: 100%;
overflow: hidden;
}
.parent{
display: flex;
flex-direction: column;
}
.top{
height: 100px;
}
.bottom{
height: 50px;
}
.middle{
flex: 1;
display: flex;
}
.left{
width: 200px;
}
.right{
flex: 1;
}
</style>
</head>
<body>
<div class="parent">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
实现方案
把上方的两个方案里的px换成相应的%
实现方案
position无法实现
flex
把上面定宽定高都去掉就好
已知HTML结构和效果图如下：
<div class="a">
<div class="b">Hello World</div>
</div>
假设以上父元素称为A，子元素称为B
请写出CSS以实现以下弹窗需求：弹窗（B）固定在浏览器窗口中间，弹窗背景色为白色，弹窗宽高由其内容决定，弹窗四周为黑色半透明（0.5透明度）遮罩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹窗</title>
<style>
*{
padding: 0;
margin: 0;
}
html,
body,
.box1 {
height: 100%;
overflow: hidden;
}
.box1 {
background-color: rgba(0,0,0,0.5);
}
.box2 {
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">Hello World</div>
</div>
</body>
</html>
