子div高度100％内部位置：固定div +溢出自动 [英] child div height 100% inside position: fixed div + overflow auto

问题描述

尝试以下操作时，我遇到了一些奇怪的行为（请参阅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：

 code> HTML，BODY 
 {width：100％;高度：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;高度：100％; 
 float：right; 
 
 background-color：#CCFFCC; 
 cursor：pointer; 
} 
  

我想做的是做一个左侧导航栏横跨整个可见窗口高度仅显示滚动条，如果其高度小于例如400px。该div的滚动条似乎总是可见的，由于一些调整大小问题（底部有一个额外的像素，我不能解释[color：red]）。

当滚动条可见时，Firefox还会将第二个子元素移动到第一个子元素下方，因为滚动条似乎是内容区域的一部分，因此占用大约20像素的空间。这不会发生，如果溢出：自动替换为溢出：滚动然而。

ATM更改布局（特别是与位置：固定的容器）不是一个选项。 / p>

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

解决方案

由于似乎你无法改变你的包装以尽可能少地更改您的原始代码。事实上，我做的只是添加一些jQuery。

查看此更新的jsfiddle 。我添加了jQuery和JavaScript我添加的是这样：

  $（window）.bind（load resize ）{
 //一旦页面准备好就运行
 if（$（window）.height（）< 400）{
 $（＃slider）。 css（overflow-y，hidden）; 
} else {
 $（ 
}）; 
  

基本上，'onload'和'onrezise'，jQuery计算出如果你应该显示滚动条不。

您的auto无效的原因是因为滑块的固定位置元件。浏览器无法完美地计算出高度。

I am experiencing some strange behaviour when attempting the following (see 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;
}

What I am trying to do is making a left side navigation bar that spans the whole visible window height and only Shows a scrollbar if its height is smaller than for example 400px. The scrollbar for that div seems to be always visible due to some resizing problems (there is an extra pixel at the bottom I can't explain[color:red]).

Firefox also moves the second child element below the first when the scrollbar is visible because the scrollbar seems to be part of the content area and thus takes up to around 20px space. This does not happen if Overflow: Auto is replaced with Overflow: scroll however.

ATM changing the layout (specifically the Container with Position: fixed) is not an option.

Don't mind the space between the green and the blue box. Seems to be a whitespace problem.

解决方案

Since it seems like you are unable to change your 'wrapper' code much, I tried to change your original code as little as possible. In fact, the only thing I did was to add some jQuery.

Check out this updated jsfiddle. I have included jQuery and the javascript I added was this:

$(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");   
    }  
});

Basically, 'onload' and 'onrezise', the jQuery figures out if you should show the scrollbars or not.

The reason that your "auto" isn't working is because of the "fixed" position of the slider element. The browser cannot perfectly figure out the heights.

这篇关于子div高度100％内部位置：固定div +溢出自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！