项目场景：

css样式布局

例如：项目场景：页面顶部导航栏，左侧logo、右侧退出登录固定在页面，不随滚动条滚动；中间有菜单，添加滚动条。

问题描述

顶部导航栏出现滚动条，滚动条位置在页面底部

解决方案：

提示：这里填写该问题的具体解决方案：

父元素进行flex布局，overflow:hidden
左元素420px;右元素80px，position:absolute
1. 中间元素使用宽度计算 width: calc(100% - 500px);


.header {overflow: hidden;height: 60px !important;padding: 0;display: flex; //设置显示为flex布局justify-content: space-between; //设置为flex左右布局align-items: center; //元素上下居中（防止右边按钮贴上下边）.logo {display: flex;justify-content: space-between;align-items: center;img {width: 420px;height: 44px;transform: rotate(0deg);}}.top-menu {width: calc(100% - 500px);min-width: 300px; //定最小宽度，菜单栏会出现滚动条}.layout {width: 80px;position: absolute;right: 8px;}
}<template><div class="h-100 top-menu"><el-scrollbar wrap-class="el-scrollbar__wrap"><el-menu mode="horizontal" :default-active="activeRouter" router></el-menu></el-scrollbar></div></template>

页面顶部导航栏css样式布局相关推荐

html+css实现页面顶部导航栏
最终效果如下: 接下来,我将从html和css两大部分,逐步为您讲解制作过程目录 Html 实现布局创建父栏目创建子栏目插入外部样式表,为接下来的css编辑做准备 Css 实现样式排布文本, ...
页面顶部导航栏随着滚轮转动，页面下滑，导航栏背景颜色，透明度，字体，样式等改变
一.大盒子app里有一个heades的导航栏,通过:style="headStyle"来改变它的颜色等样式,需要改变的,不要在style样式里定义,否则代码会执行style里定义的 ...
uniapp隐藏页面顶部导航栏和手机系统顶部导航栏
1.隐藏页面导航栏: pages.json文件在"style":{ "app-plus":{ "titleNview": false } ...
mono for android mysql_mono for android 自定义titleBar Actionbar 顶部导航栏修改样式学习...
以前的我是没有做笔记的习惯的,学习了后觉得自己能记住,但是最近发现很多学的东西都忘记了,所有现在一有新的知识,就记下来吧. 最近又做一个mono for android 的项目这次调整比较大,上次做 ...
使用 HTML/CSS 实现 Educoder 顶部导航栏
第1关:使用flex布局实现Educoder顶部导航栏容器布局任务描述本关任务:使用flex布局实现容器两端对齐的效果. 效果如下: 相关知识使用flex布局实现左右分开布局的方式有多种: 使用 ...
html怎么设置顶部导航栏,互联网常识：CSS+HTML如何实现顶部导航栏
本篇文章给大家介绍一下CSS+HTML实现顶部导航栏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 导航栏的实现.固定顶部导航栏.二级菜单实现效果图: 最近在使用这个导航栏 ...
页面最上方的搜索和logo叫什么_网页顶部导航栏设计总结
网页中顶部导航栏往往是用户进入网站后最先看到的地方,决定着用户对网页的第一印象,其重要性不言而喻. 网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏.顶部栏对于一个网 ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
HTML+CSS简单实现京东顶部导航栏
效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

页面顶部导航栏css样式布局

项目场景：

css样式布局

问题描述

解决方案：

页面顶部导航栏css样式布局相关推荐

最新文章

热门文章