【工作记录】解决溢出div自适应的高度问题

今天解决的一个问题,记录一下,先用文字记录下,有时间再用代码还原下。

响应式网站中,导航div包含的点击按钮下方出现菜单,无法控制高度(max-height控制百分比不行),后用js实现。是否不用js可以有更好方法?(之后补充)

js代码如下

function redirectpage() {
//var h1=document.getElementById("div_nav_top").height;/*页面上方顶部导航条div(z-index:2000),不知道为何不能获取其高度*/
//var h2=document.getElementById("div_nav_bottom").height;/*页面下方方顶部导航条div(z-index:2000),不知道为何不能获取其高度*/
if (window.innerHeight)
var winHeight = window.innerHeight;/*获取浏览器高度*/
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//var h_plus=130+‘px‘;
var h_list=winHeight-130+‘px‘;/*js计算高度的格式*/
//alert("h_list"+h_list);
document.getElementById("drop_down_h").style.maxHeight = h_list;
//alert("winHeight:"+winHeight);
//alert("下拉菜单的宽度:"+document.getElementById("drop_down_h").style.maxHeight);
}

时间: 2024-10-14 23:30:02

【工作记录】解决溢出div自适应的高度问题的相关文章

jquery实现div自适应浏览器高度

<!DOCTYPE html><html><head><meta charset=UTF-8 /><title>jquery实现div自适应浏览器高度(宽度)</title><meta name="keywords" content="html5" /><meta name="description" content="html5 test&quo

未知高度的div自适应图片高度

<div style="background-image: url(http://your-image.jpg);"> <img src="http://your-image.jpg" style="opacity:0;" /></div> 用图片去占位,把div高度撑开就可以显示背景图片 同时改变背景图和图片的宽高就可以做到div高度自适应背景图的高度啦

当div自适应的高度超过预设的高度的时候出现滚动条的办法

方法一: <style type="text/css"> #table1,#table2{ overflow-y:auto; overflow-x:hidden; min-height:50px; max-height:300px; display: none; } </style> 方法二:三元运算符 $(function(){ $("#sss").height() < 200 ? $("#sss").height

关于层DIV自适应高度的问题总汇

我们先来看一个最普通的父层自适应子层高度的例子(通常来讲,布局时父层都是不设置高度的) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .f{ width:200px; border:1px solid #000; padding: 25px; margin: 50px auto;} .z{ w

div有最小高度且自适应高度

DIV最小高度且自适应高度 在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑开. 如果要设置DIV自适应高度,我们可以采用height:auto;这个属性:不过这个属性IE6又不支持了.是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个DIV最小高度是100px,超过时就让里面的信息自动撑开): 1 2 3 4 5 .div{     h

外层div自适应内层div高度

最近在做项目的时候,写jsp页面,在显示一些数据时不知道数据的多少,这时候就需要外层div自适应内层div的高度. 在网上找了些方法,也是本人现在用的解决方法,这里只介绍一种,当然还有很多种解决方法. 如: 1 <div id="div_1"> 2 <div id="div_1_1"></div> 3 <div id="div_1_2"></div> 4 <div id="

DIV相关的操作总结: DIV居中,DIV自适应高度

http://www.cnblogs.com/scy251147/p/3391228.html 父DIV自动匹配子DIV高度的方法 DIV居中或者居底的方法 DIV最小高度及自适应方法: 需要给DIV块一个最小高度,但是当DIV内部内容超过最小高度的时候,需要DIV能够随着高度的增加而增加.这个时候,我们就可以利用_height和min-height属性来解决.

图片溢出div问题的最终解决方案

前两天编写了一个前端页面,在本机上显示一切正常.不过在不断的测试中,发现了一个严重的问题,如果图片过大,会撑破div溢出来.再由于页面是自适应页面,根据不同分辨率的显示器会做出相应的div宽度调整,所以图片即使不大,但是因分辨率不同也会出现溢出的情况. 这里探讨总结一下解决方法. 首先我们先来做个简单的css布局: <html><head> <meta charset="utf-8" /> <title>div图片溢出的解决方案</

element-ui中轮播图自适应图片高度

哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不重要,大致思路就是页面渲染前拿到当前窗口的宽度*图片比例给轮播图一个初始的高度,当窗后大小发生变化时,监听事件里将轮播图高度重新赋值即可,再次感谢两位博友的帮助 <template> <div v-if="imgurl"> <el-carousel :heig