div自适应屏幕高度

问题描述：本地项目页面左侧菜单点击父亲节点拉伸出子节点后，演示的阴影不能覆盖所有的左侧菜单，现象如下图：此时整个演示的页面要通过滚动条才能看到整个菜单内容

整个菜单都放在div中,div的父亲节点为body，此时设置了height为100%，依然没有效果

<div class="leftpanel">

开始考虑的解决方案是div自适应屏幕大小，尝试方案如下：

尝试方案：

1.通过css样式修改，设置最小高度

_height:200px; /* css 注解： 仅IE6设别此属性，假定最低高度是200px ，设置高度200px，内容超出后IE6会自动撑高设定高度 */
min-height:200px; /* css注释

无效

2.设置body和html的height都为100%

无效

3.通过js获取到屏幕高度，然后设置div的高度为屏幕高度

<div id="test" style=" border: solid 1px #f00; "></div>
<script type="text/javascript">
autodivheight();
function autodivheight(){ //函数：获取尺寸//获取浏览器窗口高度var winHeight=0;if (window.innerHeight)winHeight = window.innerHeight;else if ((document.body) && (document.body.clientHeight))winHeight = document.body.clientHeight;//通过深入Document内部对body进行检测，获取浏览器窗口高度if (document.documentElement && document.documentElement.clientHeight)winHeight = document.documentElement.clientHeight;//DIV高度为浏览器窗口的高度document.getElementById("test").style.height= winHeight +"px";}
window.οnresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度
</script>

获取到屏幕高度之后依然无效，开始考虑这个问题并不是div高度等于屏幕的高度，而是当子菜单拉伸出来后，多余的菜单已经超过了div的高度（也就是屏幕的高度，所有产生了滚动条），此时给div增加了一个css样式后，问题解决！

display: table;

div自适应屏幕高度相关推荐

html div 自动适应屏幕,css怎么让高度自适应屏幕高度？
在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度.下面我们来看一下css设置高度自适应屏幕高度的方法. 首先,我们刚开始设计 ...
怎么让Html的高度自适应屏幕高度
在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部. 效 ...
Vue-实现自适应屏幕高度的方法
项目中使用的element-ui的table组件,让它的高度自适应屏幕的高度,代码如下: html: <divclass="tablebox"v-bind:style=&qu ...
css 真正意义上达到height:100%，自适应屏幕高度
最近发现了个用绝对布局写自适应屏幕的写法,让我觉得,之前小程序傻傻读屏幕高再给背景view赋值min-height的写法简直太傻了毕竟能用css解决的问题最好就不要js .shi{position: ...
CSS设置div与屏幕高度一致
具体实现 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
html css div自适应屏幕宽度，高度
做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题.所以针对div+css窗口最大化.缩小的自适应加以解决. [html] view plain co ...
让div元素自适应浏览器屏幕高度
很多时候都需要让div或者其他标签元素自适应浏览器屏幕高度,比如左侧菜单高度自适应所以可以用window.innerHeight然后绑定到元素上面如图,我用vue,jq的也差不多.反正只要获取到w ...
【Css】移动端用flex实现DIV高度自适应屏幕和带滚动条效果（代码示例）
一.自适应高度 vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个.其中最大的那个 ...
vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...

div自适应屏幕高度

div自适应屏幕高度相关推荐

最新文章

热门文章