页面布局-左侧菜单右侧内容

左侧200px，右侧根据窗口自适应，右侧宽度小于800px的时候会出现滚动条

要实现的效果

html

<div class="container"><div class="inner left"><div class="menu-item"><div style="width: 300px;background: blue;">item</div></div><div class="menu-item">item1</div><div class="menu-item">item1</div></div><div class="inner right"><div class="content">这里是项目内容展示区域</div></div>
</div>

基本的css

*{box-sizing: border-box;
}
html,body{margin: 0;padding: 0;height: 100%;width: 100%;word-break: break-all;
}
.inner{border: 1px solid lightpink;background-color: lightskyblue;
}
.content{width: 100%;height: 100%;min-width: 800px;
}

flex实现

.container{width: 100%;height: 100%;display: flex;
}
.container .left {width: 200px;
}
.container .right {width: calc(100% - 200px);overflow: auto;
}

float实现

.container{width: 100%;height: 100%;overflow: hidden;
}
.container .left {float: left;width: 200px;height: 100%;
}
.container .right {float: left;width: calc(100% - 200px);height: 100%;overflow: auto;
}

左侧菜单定位-absolute和fixed都可以实现

.container{width: 100%;height: 100%;overflow: hidden;
}
.container .left {width: 200px;height: 100%;position: absolute;overflow: hidden;
}
.container .right {height: 100%;overflow: auto;margin-left: 200px;
}

页面布局-左侧菜单右侧内容相关推荐

php怎么写左侧菜单右侧内容,ifram 实现左侧菜单，右侧显示内容
一般都是左侧的导航栏中的a标签中写一个target(a标签有target属性), 右侧的div标签中写一个iframe,在iframe中有name的属性,在左侧a标签中的target写上iframe中 ...
管理后台布局-左菜单-右侧内容宽度控制（使用ant design vue)
项目结构如下: 布局实现的代码段 <template><a-layout><a-layout-siderv-model="collapsed":tri ...
用sitemesh来装饰动态的左侧菜单和内容部分
sitemmesh是一个页面装饰框架,利用它可以很简单的对整个系统进行统一架构装饰,比如一个应用系统的web层可能就是top+left+content+footer四个部分组成(下图) 使用sitem ...
html 右侧滚动,HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
html css放在右边,HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
html点击左侧菜单右侧顶部生成选项卡,标签在左侧的CSS竖向简洁选项卡
标签在左侧的CSS竖向简洁选项卡 body{padding:50px;margin:0;color:#666;font:12px arial,sans-serif;} #getId{width:400 ...
微信小程序页面布局——上中下结构
小程序页面布局--上中下结构内容简述上中下结构:头脚固定+中间滚动框使用UI框架:Vant Weapp(引入安装参考) 为了方便,使用了less生成wxss,所以展示的是less代码,有需要可以 ...
html中页面布局技术,CSS基础之几种常见的页面布局
CSS基础之几种常见的页面布局本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的,按照它给出的方法不能实现我想要的目的.于是自己决定写一篇经验.如 ...
后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...

页面布局-左侧菜单右侧内容

页面布局-左侧菜单右侧内容相关推荐

最新文章

热门文章