首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当浏览器窗口高度减小时,我的侧边抽屉高度丢失

当浏览器窗口高度减小时,侧边抽屉高度丢失可能是由于响应式设计不完善或者CSS样式设置不当导致的。

响应式设计是一种能够根据设备屏幕大小和分辨率自动调整布局和样式的设计方法。在开发过程中,需要使用CSS媒体查询来设置不同屏幕尺寸下的样式。如果没有正确设置媒体查询或者设置不完善,当浏览器窗口高度减小时,侧边抽屉的高度可能无法适应新的窗口尺寸,导致高度丢失。

另外,CSS样式设置不当也可能导致侧边抽屉高度丢失。在设置侧边抽屉的样式时,需要确保正确设置高度属性,例如使用百分比、像素或者其他单位来定义高度。如果没有正确设置高度属性,侧边抽屉的高度可能无法正确显示。

为了解决这个问题,可以采取以下几个步骤:

  1. 检查响应式设计:确保在CSS中正确设置媒体查询,以适应不同屏幕尺寸下的布局和样式。可以使用@media规则来设置不同屏幕尺寸下的样式,例如:
代码语言:txt
复制
@media screen and (max-width: 768px) {
  /* 在窗口宽度小于等于768px时的样式 */
  .sidebar {
    /* 设置合适的高度属性 */
  }
}
  1. 检查高度属性设置:确保在CSS中正确设置侧边抽屉的高度属性。可以使用百分比、像素或其他单位来定义高度,根据实际需求选择合适的单位。例如:
代码语言:txt
复制
.sidebar {
  height: 100%;
  /* 或者使用其他单位,如height: 300px; */
}
  1. 测试和调试:在不同浏览器和设备上测试侧边抽屉的显示效果,并使用浏览器开发者工具进行调试。通过检查元素的样式和布局信息,可以找到问题所在并进行修复。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mobile
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云直播(CSS):https://cloud.tencent.com/product/css
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【软件开发规范七】《Android UI设计规范》

小图标点击区域:48x48dp 侧边抽屉到屏幕右边距离:56dp 卡片间距:8dp 分隔线上下留白:8dp 大多元素留白距离:16dp 屏幕左右对齐基线:16dp 文字左侧对齐基线:72dp ​...使用悬浮按钮要遵循以下规则: 建议只用一个悬浮按钮 悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单边缘 悬浮按钮不能被其他元素盖住,也不能挡住其他按钮 列表滚动至底部时,悬浮按钮应该隐藏...(Navigation drawer) ​编辑 侧边抽屉从左侧滑出,占据整个屏幕高度,遵循普通列表布局规则。...手机端侧边抽屉距离屏幕右侧56dp。 ​编辑 侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部。抽屉收起时,会保留之前滚动位置。 ​...如果没有侧边抽屉,则放在Appbar下拉菜单底部。 ​编辑 ​编辑 设置界面只能包含设置项,诸如关于、反馈之类界面,入口应该放在其他地方。 设置项使用通栏分隔线来分组。7项以下不必分组。

5K20

android侧滑菜单控件DrawerLayout使用方法详解

drawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(drawerLayout自身特性),主内容区内容可以随着菜单点击而变化(这需要使用者自己实现)。...同时在DrawerLayout内部添加两个view: 添加一个View,它包含应用主内容(抽屉隐藏时你主要布局); 添加另一个View它包含了导航抽屉; 如下面例子所示:该布局使用了DrawerLayout...主内容View被设置成匹配父View宽和高,因为导航抽屉隐藏时候它要填充整个UI。...为了满足从右到左约定,声明它值为”start” 代替 “left”(因此这个抽屉将会在右面呈现布局是RTL时) 在导航View声明时:宽度用dp为单位、高度匹配父View。...为了保证用户无论怎样都能看到主内容一部分,导航抽屉宽度不能超过320dp 初始化Drawer List 在你Activity中,要做第一件事是初始化导航抽屉列表项。

2.6K10
  • VUE-项目结构

    访问流程:用户在浏览器输入路径,例如:http://localhost:9001/#/item/brand --> index.js(/item/brand路径对应pages/item/Brand.vue...包含左,上,中三部分: 里面使用了Vuetify中2个组件和一个布局元素: v-navigation-drawer :导航抽屉,主要用于容纳应用程序中页面的导航链接。...v-toolbar:工具栏通常是网站导航主要途径。可以与导航抽屉一起很好地工作,动态选择是否打开导航抽屉,实现可伸缩侧边栏。 v-content:并不是一个组件,而是标记页面布局元素。...可以根据您指定app组件结构动态调整大小,使得您可以创建高度可定制组件。 那么问题来了:v-content中内容来自哪里?...Layout映射路径是/ 除了Login以为所有组件,都是定义在Layoutchildren属性,并且路径都是/下面 因此当路由到子组件时,会在Layout中定义锚点中显示。

    1.9K20

    css视口单位vw,vh妙用(embed篇)

    因为刚刚【假设父级div就是真个屏幕】这样假设了下,实际用起来肯定是多种情况,比如我博客电脑端是有侧边,文章div也是有边距,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。...这里得电脑端测栏加边距宽度大约是330px,手机端边距太小就忽略不算了 对应css就是这样 @media only screen and (min-width:768px){ embed{height...原理就是这样,因为也没有去仔细计算模板边距测栏宽度总和是多少,所以比例不可能特别精准,还有就是现在iframe同样可以用上述方法。...本来,文章写道这里就应该结束了,但是突然想到了香菇社长那个超宽屏幕,仅仅是上述代码肯定会导致一个问题,视频高度可能会超出屏幕高度。 怎么办呢?想了一下,觉得这样比较简单!...在电脑端css加入下面的东东 max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度

    1.1K30

    Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    自上次参加完回音分享会后,下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中组件(顺便学学英语),以便今后在使用时候完全不虚...如果优先考虑进行帐户切换,则可以将帐户切换器放置在导航抽屉 header 区域 ?...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边 modal drawers。...·如果抽屉内容低于屏幕高度50%,则 drawer 全部打开 ·如果 drawer 内容大于屏幕高度50%,请先将其打开至50%,然后允许用户将 drawer 向上拖动至其全高或屏幕高度(以先到者为准...滚动 Bottom navigation drawers 一旦打开至全屏高度,就可以在内部滚动。 最初打开到屏幕高度50%时,在显示其他项目之前,必须将 drawer 拖到屏幕高度

    3.8K40

    DOM 和 BOM 中各种宽高属性

    原生 JavaScript 1.与 window 相关宽高 1.1 与窗口相关 window.innerHeight/window.innerWidth: 返回表示窗口内部高度/宽度数字。...不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制部分 window.outerHeight/window.outerWidth: 返回表示窗口外部高度/宽度数字。...包括可能位于任意一侧任务栏。这两个属性不受浏览器窗口位置影响。...这两个属性不受浏览器窗口位置影响 image.png window.screenLeft/window.screenTop: 返回表示窗口到屏幕距离数字。无视任务栏。...注意:IE 和 Opera 下表示窗口文档区到屏幕距离,这意味着窗口最大化时,screenTop 返回窗口顶部栏高度而不是 0。

    1.9K10

    详解各种获取元素宽高及位置属性

    元素 style.display 设置为 "none" 时,offsetParent 返回 null。...var innerWidth = window.innerWidth; innerHeight window.innerHeight 是一个只读属性,表示浏览器窗口视口(viewport)高度(以像素为单位...outerWidth Window.outerWidth 是一个只读属性,表示整个浏览器窗口宽度,包括侧边栏(如果存在)、窗口镶边(window chrome)和调正窗口大小边框(window resizing...var outerWidth = window.outerWidth; outerHeight Window.outerHeight 是一个只读属性,表示获取整个浏览器窗口高度(单位:像素),包括侧边栏...一个元素 scrollTop 值是这个元素顶部到它最顶部可见内容(顶部)距离度量。一个元素内容没有产生垂直方向滚动条,那么它 scrollTop 值为0。

    4K80

    【React Native 安卓开发】----侧边实现DrawerLayoutAndroid以及第三方框架react-native-side-menu使用【第六篇】

    前言 做过安卓原生开发童鞋们应该都做过侧边栏这个东西,而且对于开源框架SlidingMenu和android官方侧滑菜单DrawerLayout应该都不陌生。...导航视图一开始在屏幕上并不可见,不过可以从drawerPosition指定窗口侧面拖拽出来,并且抽屉宽度可以使用drawerWidth属性来指定。...drawerWidth number 指定抽屉宽度,也就是从屏幕边缘拖进视图宽度。...on-drag 拖拽开始时候隐藏软键盘。 onDrawerClose function 每当导航视图(抽屉)被关闭之后调用此回调函数。...onDrawerStateChanged function 每当抽屉状态变化时调用此回调函数。抽屉可以有3种状态: idle(空闲),表示现在导航条上没有任何正在进行交互。

    6.7K40

    Android入门教程 | DrawerLayout 侧滑栏

    DawerLayout 分为侧边菜单和主内容区两部分: 主内容区要放在侧边菜单前面,还有就是主内容区最好以 DrawerLayout 最好为界面的根布局,否则可能会出现触摸事件被屏蔽问题。...使用注意事项 主内容视图一定要是 DrawerLayout 第一个子视图 主内容视图宽度和高度需要 match_parent 必须显示指定侧滑视图 android:layout_gravity 属性...从左边滑出抽屉视图(侧滑栏) 一个简单从左边滑出侧滑栏例子。 侧滑栏滑出后,后面的视图会有个阴影。 layout 文件 <?xml version="1.0" encoding="utf-8"?...layout_height="wrap_content" android:layout_centerInParent="true" android:text="<em>我</em>是主页...现在<em>侧边</em>栏放<em>的</em>是RelativeLayout。 也可以放一个RecyclerView。 <em>抽屉</em>出来时推动页面 监听侧滑栏<em>的</em>滑动事件,使用ActionBarDrawerToggle。

    2.2K10

    Joe主题再续前缘版 - 本站同款

    前言 因为Joe主题作者不再更新,便基于原主题 7.3.7 最新版开发了再续前缘版,秉承着原版作者大神免费开源伟大初衷(在这里吐槽一下...密...),再续前缘版是朝着简便实用路线发展。...” 中 不显示错误 修复移动端侧边栏图片封面右边多出白色边框 修复友链页面站点介绍过多导致卡片高度不一BUG 修复自定义多级分类情况下网站地图生成url显示不正确bug,暂时只支持2级分类 新增视频可设置自动播放...,src路径带上参数 autoplay=true 即可 新增首页和其他页面文章可设置打开窗口模式 新增展示百度站点统计功能 新增移动端侧边栏显示登录注册等操作 新增可设置QQ微信打开网站跳转浏览器防红功能...新增可自定义侧边栏登录注册URL函数 优化移动端页面已经往下滑动之后点击分类等栏目不会返回顶部 文章收录检测失败后改为手动提交收录 1.05 缩小文章页面列表模块左边距 如果填写百度推送Token...1.12 优化打开文章导读目录后背景层模糊效果 优化移动端侧边栏功能模块背景为85%白色透明效果 可配合壁纸高度功能使用全屏壁纸 新增可开启或关闭PC端导航栏背景毛玻璃效果(毛玻璃效果启动后部分

    3K20

    Flutter基础(二)

    MaterialApp 主要属性如下: title : 在任务管理窗口中所显示应用名字 theme : 应用各种 UI 所使用主题颜色 color : 应用主要颜色值(primary color)...,也就是安卓任务管理窗口中所显示应用颜色 home : 应用默认所显示界面 Widget routes : 应用顶级导航表格,这个是多页面应用用来控制页面跳转,类似于网页网址 initialRoute...:第一个显示路由名字,默认值为 Window.defaultRouteName onGenerateRoute : 生成路由回调函数,导航命名路由时候,会使用这个来生成界面 onLocaleChanged...drawer:左边侧边栏控件 endDrawer:右边侧滑栏 backgroundColor: 内容背景颜色,默认使用是 ThemeData.scaffoldBackgroundColor 值 4...//图片控件宽度 height: 240.0, //图片控件高度 fit: BoxFit.cover, //告诉引用图片控件,图像应尽可能小,但覆盖整个控件

    98730

    微信H5页面兼容性解决方案

    1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 点击输入时候,光标的高度和父盒子高度一样。...出现原因分析:通常我们习惯用height属性设置行间高度和line-height属性设置行间距离(行高),点击输入时候,光标的高度就自动和父盒子高度一样了。...(谷歌浏览器设计原则,还有一种可能就是没有内容时候光标的高度等于inputline-height值,有内容时,光标从input顶端到文字底部 解决办法:高度height和行高line-height...而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口可见区域内元素滚动到浏览器窗口可见区域。...会导致刚提交代码(特别是js)效果要半个小时左右才生效。

    3.4K43

    nicegui布局细节补充——容器高度与滚动条

    实战: 只有左下和右边的卡片中列表内容部分,才会出现滚动条 整个布局刚好铺满整个窗口,就算动态修改浏览器窗口大小也是如此 本节使用 nicegui 版本为 1.4.20 高度溢出处理 创建一个容器,...如果我们追加更多内容,最终内容超过了浏览器窗口高度,此时窗口就会出现滚动条。 很合理吧,总不能说内容超出了可视范围,直接把多余内容干掉吧。...所以,所有的规则设计核心就是:“尽可能展现内容,避免信息丢失” 在 web 中,普通容器宽度实际上是填满整行。...上图,不管浏览器窗口怎么调整,在一定范围内,不希望整个窗口出现滚动条。但是确实其中两个卡片中区域,需要展示许多内容。仅限于这些局部地方出现滚动条。...注意,虽然这里表达是一个百分比,但是参考物是屏幕高度,这是一个确定值,因此,60%屏幕高度,也是确定值 屏幕高度是可以变化,比如手动调整浏览器窗口高度

    1.2K10

    css粘性定位sticky

    前言 发现很多博客侧边栏可以跟随滚动条移动到底部又可以继续翻看侧边栏,F12看了下代码,仅仅是用了一个sticky定位,下边简单说一下sticky定位 内容简介: 讲 sticky 定位之前,先说一下...position 其他定位 absolute 生成绝对定位元素,相对于 static 定位以外第一个父元素进行定位。...fixed 生成固定定位元素,相对于浏览器窗口进行定位(老IE不支持),元素位置通 过"left", "top", "right" 以及 "bottom" 属性进行规定。...inherit规定应该从父元素继承 position 属性值。 sticky使用 粘性定位可以被认为是相对定位和固定定位混合。...必须指定top、bottom、left、right4个值之一,否则只会处于相对定位 父元素高度不能低于sticky元素高度 sticky元素仅在其父元素内生效

    1.1K10

    折叠屏上应用设计规范,了解一下?

    最重要一点是,栏式网格提供了一种合理方式来思考屏幕尺寸变大或变小时如何将内容进行重排,从而帮助您对不同屏幕尺寸作出一致响应。...△ 响应式界面可根据屏幕尺寸变化而调整内容布局 设想一下,您调整浏览器窗口小时,如果浏览器回退了一个页面,或者重定向到另一个页面,又或者修改了历史记录,这种体验非常奇怪。...针对每个页面,您可以思考一下,屏幕尺寸变大时,可以添加什么内容。屏幕尺寸变小时,可以删除哪些内容。然后再选择合适策略。...我们有许多可选方案,比如使用屏幕尾侧侧边抽屉式导航栏,或者使用上滑式底部动作条,或者使用选项菜单,甚至可以将内容完全隐藏起来。...我们将使用这些坐标以及宽度和高度创建一个 Rect 对象,这样我们便得到了窗口坐标空间中视图边界。

    4.4K20

    两个 viewports 故事-第二部分

    元素,窗口以及屏幕。...如果移动浏览器和桌面浏览器工作原理相同,侧边栏至多显示 40px 宽,确实太窄了。你自适应布局看上去被压扁了。 解决这个问题方法之一就是为移动浏览器设计特殊网站。...视觉视图通过缩放改变时(如果是放大,屏幕上 CSS 像素会变少),布局视图尺寸不会变。...这会对布局视图高度产生影响,纵向模式下布局视图高度小于实际高度。但是网页开发者不关心高度,只关心宽度。 ? 测算布局视图 现在我们想要测算两个视图尺寸。...很明显,当用户放大或缩小时,由于更多或更少 CSS 像素会适配屏幕,视觉视图尺寸会发生变化。 ?  不幸是这种方法并不兼容。很多浏览器仍然需要增加对视觉视图尺寸支持。

    1.8K70

    浏览器JavaScript核心BOM(浏览器对象模型)对象Navigator和Screen简单了解

    这里就直接放上图给大家看,大家也可以自己用浏览器去进行尝试 ?...二、Screen对象 该对象可以获取浏览器窗口外部显示器信息,例如像素宽度和高度之类。...屏幕像素高度系统部件高度之后值(只读) availWidth 屏幕像素宽度系统部件宽度之后值(只读) colorDepth 用于表示颜色位数(只读) height 屏幕像素高度 width...屏幕像素宽度 这里讲解一下 availHeight 和 height 区别,前者是不把系统任务栏高度算在内;后者是屏幕高度。...也写过其他对象文章,比如window对象 、 location对象 、history对象,大家可以去翻阅文章。

    54530

    微信 H5 页面兼容性解决方案

    1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 点击输入时候,光标的高度和父盒子高度一样。...出现原因分析:通常我们习惯用height属性设置行间高度和line-height属性设置行间距离(行高),点击输入时候,光标的高度就自动和父盒子高度一样了。...(谷歌浏览器设计原则,还有一种可能就是没有内容时候光标的高度等于inputline-height值,有内容时,光标从input顶端到文字底部 解决办法:高度height和行高line-height...而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口可见区域内元素滚动到浏览器窗口可见区域。...会导致刚提交代码(特别是js)效果要半个小时左右才生效。

    3.3K30

    【H5】344- 微信 H5 页面兼容性解决方案

    1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 点击输入时候,光标的高度和父盒子高度一样。...出现原因分析:通常我们习惯用height属性设置行间高度和line-height属性设置行间距离(行高),点击输入时候,光标的高度就自动和父盒子高度一样了。...(谷歌浏览器设计原则,还有一种可能就是没有内容时候光标的高度等于inputline-height值,有内容时,光标从input顶端到文字底部 解决办法:高度height和行高line-height...而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口可见区域内元素滚动到浏览器窗口可见区域。...会导致刚提交代码(特别是js)效果要半个小时左右才生效。

    2.6K30
    领券