<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中布局解决方案</title>
<style type="text/css">
body,html,.parent {
height: 100%;
overflow: hidden;
}
.parent {
display: flex;
flex-direction: column;
}
.parent .top {
height: 100px;
background-color: #fff;
}
.parent .middle {
display: flex;
flex: 1;
}
.parent .middle .left {
width: 200px;
background-color: pink;
}
.parent .middle .right {
flex: 1;
overflow: auto;
background-color: yellow;
}
.parent .middle .right .inner {
min-height: 500px;
}
.parent .bottom {
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>
<div>top hello world</div>
<div>
<div>hello worldhello worldhello worldhello worldhello worldhello world</div>
<div>
<div>inner</div>
</div>
</div>
<div> bottom hello worldhello worldhello worldhello worldhello worldhello world</div>
</div>
</body>
</html>做了个布局的练习！设想是中间部分的右边，碰到窗口比较小时，会自动 出现滚动条！这个代码在chorme里没有问题可以实现，但在firefox和平时用的搜狗浏览器里，当窗口高度比较小的时候，不但没有出现滚动条，而且top和bottom部分，设了高度的部分居然会自己缩小！实在不明白！
- 1 回答
- 0 关注
- 1724 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消