左侧固定宽高，右侧自适应

最新推荐文章于 2022-07-02 17:10:57 发布

狂野的心跳

最新推荐文章于 2022-07-02 17:10:57 发布

阅读量980

点赞数

分类专栏： css 文章标签：固定自适应后台系统布局

本文链接：https://blog.csdn.net/guozhangqiang/article/details/79208899

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

同事问了一个关于css的问题，如何实现浏览器内容左侧固定宽度，右侧宽度随浏览器改变而改变，这类需求个人觉得在管理系统经常遇到，顶部导航栏，左侧菜单栏，剩下的就是内容。

1、首先，左侧div需要给定一个固定宽度，并且左浮动。

2、右侧div不要右浮动了，设置overflow:hidden即可（不设置overflow:hidden见下文效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试demo</title>
    <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	#title{
    		width: 100%;
    		height: 50px;
    		line-height: 50px;
    		text-align: center;
    		color: white;
    		background: rgba(0,0,0,0.4);
    	}
    	#box{
    		width: 100%;
    		height: auto;
    		border-top: 1px solid red;
    		border-bottom: 1px solid red;
    	}
    </style>
</head>
<body>
<div id="title">测试demo</div>
<div id="box">
	
</div>
<br>
<p>左边固定，右边自适应</p>
<div style="float: left;width: 120px;background: red">1</div>	
<div style="background: grey;color: white;overflow: hidden;">
	<p style="text-align:center">11111111111</p>
    <p style="text-align:center">22222222222</p>
</div>
<script>
</script>
</body>
</html>

PS：各位小伙伴不要写行内样式哈，这里方便测试才写的行内样式(*￣︶￣)

效果图：

1、设置overflow:hidden

2、不设置overflow:hidden

狂野的心跳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
左侧固定宽高，右侧自适应

同事问了一个关于css的问题，如何实现浏览器内容左侧固定宽度，右侧宽度随浏览器改变而改变，这类需求个人觉得在管理系统经常遇到，顶部导航栏，左侧菜单栏，剩下的就是内容。 1、首先，左侧div需要给定一个固定宽度，并且左浮动。2、右侧div不要右浮动了，设置overflow:hidden即可（不设置overflow:hidden见下文效果）测试demo
复制链接

扫一扫