html – 子div高度100％内部位置：固定div溢出auto

概述尝试以下 *** 作时遇到一些奇怪的行为(请参阅jsfiddle： http://jsfiddle.net/9nS47/). HTML： <div id="slider"> <div id="wrapper"> <div id="navigation"></div> <div id="container"> <div id="button"> 尝试以下 *** 作时遇到一些奇怪的行为(请参阅Jsfiddle： http://jsfiddle.net/9nS47/).

HTML：

<div ID="slIDer">    <div ID="wrapper">        <div ID="navigation"></div>        <div ID="container">            <div ID="button"></div>        </div>    </div></div>

CSS：

HTML,BODY { wIDth:100%; height:100%; }* { margin: 0; padding: 0; }#slIDer{    position: fixed;    top: 0;    bottom: 0px;    left: 100px;    overflow-y: auto;    background-color: red;}#wrapper{    position: relative;    height: 100%;    background-color: #000000;    min-height:400px;}#navigation{    display: inline-block;    wIDth: 80px;    height: 100%;    background-color: #0000FF;}#container{display: inline-block;    height: 100%;    background-color: #00FF00;}#button{    wIDth: 22px; height: 100%;    float:right;    background-color: #CCFFCC;    cursor:pointer;}

我要做的是制作一个横跨整个可见窗口高度的左侧导航栏,如果其高度小于例如400px,则仅显示滚动条.由于一些调整大小问题,该div的滚动条似乎总是可见的(底部有一个额外的像素我无法解释[color：red]).

当滚动条可见时,firefox还会将第二个子元素移动到第一个元素下方,因为滚动条似乎是内容区域的一部分,因此占用大约20px的空间.如果Overflow：auto被Overflow替换,则不会发生这种情况：滚动.

ATM改变布局(特别是位置：固定的容器)不是一种选择.

不要介意绿色和蓝色框之间的空间.似乎是一个空白问题.

解决方法 由于您似乎无法更改“包装”代码,因此我尝试尽可能少地更改原始代码.事实上,我唯一做的就是添加一些jquery.

查看this updated jsfiddle.我已经包含了jquery,我添加的JavaScript是这样的：

$(window).bind("load resize",function(){       //this runs as soon as the page is 'ready'    if($(window).height() < 400){                $("#slIDer").CSS("overflow-y","scroll");    }else{                $("#slIDer").CSS("overflow-y","hIDden");       }  });

基本上,’onload’和’onrezise’,jquery会判断你是否应该显示滚动条.

“自动”不起作用的原因是滑块元素的“固定”位置.浏览器无法完美地找出高度.

总结

以上是内存溢出为你收集整理的html – 子div高度100％内部位置：固定div溢出auto全部内容，希望文章能够帮你解决html – 子div高度100％内部位置：固定div溢出auto所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。