Jquery 固定高度页面中带滚动条的Div_Jquery_Html_Css

Jquery 固定高度页面中带滚动条的Div

jquery html css

Jquery 固定高度页面中带滚动条的Div,jquery,html,css,Jquery,Html,Css,我有这个html结构： <body> <div id="container"> <div id="header">Not empty</div> <div id="content"> <div id="inner_header">Not empty</div> <div id="scrollable_content"&g

我有这个html结构：

<body>
    <div id="container">
        <div id="header">Not empty</div>
        <div id="content">
            <div id="inner_header">Not empty</div>
            <div id="scrollable_content">Very long content</div>
        </div>
    </div>
</body>

如何使用CSS3实现这一点

编辑：我使用jQuery找到了一个解决方案（见下文）。我想知道是否可以只使用CSS3

提前谢谢

我的建议：

-运行一些javascript来重新调整容器div/scrollable_content div的大小，使其始终为浏览器的100%高度。如果人们调整大小、最大化等，浏览器窗口将关闭您的高度

根据网站/应用程序的不同，您可以在计时器（setTimeout）上设置此选项，或收听浏览器的调整大小事件

退房：

或

更新：

我刚才说的是：

我只是把它作为一个调整大小的按钮，但是你可以看到，如果你调整右下角窗口的大小，然后点击按钮，它将调整该div的大小，使之成为包含div的高度

您还可以通过获取浏览器高度（此示例包括宽度）来扩展此功能。我没有写这个脚本，它是在互联网上传播的同一个脚本，我只是复制它：

if( typeof( window.innerWidth ) == 'number' ) { 

//Non-IE 

myWidth = window.innerWidth;
myHeight = window.innerHeight; 

} else if( document.documentElement && 

( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 

//IE 6+ in 'standards compliant mode' 

myWidth = document.documentElement.clientWidth; 
myHeight = document.documentElement.clientHeight; 

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 

//IE 4 compatible 

myWidth = document.body.clientWidth; 
myHeight = document.body.clientHeight; 

}

当您完全定位一个元素时，它将从页面流中出来。请看一下这把小提琴。注意：绿色框会显示两个垂直滚动条

要获得仅显示在标题下方的单个滚动条，您需要修改CSS。此CSS仅适用于固定高度的标题

将html/body上的边距/填充设置为零，并设置

溢出：隐藏，以便它们不会触发主浏览器滚动条


将主体设置为100%高度，这样我们就可以将其内部的div设置为100%
绝对定位将包含可滚动内容的子div。然后使用左、右、上、下拉伸以填充屏幕

使用Herman先生的代码，
我已经提出了您的解决方案：）
我希望就是这样
这是我目前使用jQuery找到的解决方案：
window.setTimeout(function () {
$(document).ready(function () {
    var ResizeTarget = $('#content');
ResizeTarget.resize(function () {
    var target = $('#scrollable_content');
    target.css('height', $(document).height() - $("#header").height() - $("#inner_header").height());
}).trigger('resize');
}); }, 500);

如果他使用的是%
，那么调整大小对他来说仍然可以解决问题-是吗？但他不受限制地不使用它。@RyanTernier-谢谢！是的，似乎可以用JS/jQuery完成。我刚刚发布了一个使用jQuery找到的解决方案。现在我想知道这是否可能只使用CSS3。更新了我的答案，并提供了更多提示。非常接近。我知道有人能解决这个问题。所以这个问题也可能对你有帮助-谢谢！我现在可以看出绝对位置的问题了。虽然我仍在寻找一个完美的解决方案，但这一个很好：）第三次的魅力呢？我应该问一下头球是否是固定高度的。看到这个小提琴-难以置信的接近：）页面现在长了50像素。如果滚动到页面底部，可以看到问题。在我的场景中，头更大，因此问题更为明显。头e内头有固定高度吗？如果CSS去掉边框并在div中增加100%的宽度，那么它可以单独使用CSS来完成。可滚动的内容
看起来会更好。实际上，这个解决方案取决于浏览器的高度。如果我使用低分辨率的屏幕（例如手机），它看起来与使用高分辨率屏幕非常不同。我认为你的链接不太正确。看起来不像你描述的那样。还注意到您的
标记位于标记内。很抱歉，我缺少脚本标记的type属性。我现在在Chrome和Opera中工作。
/* set body to 100% so we can set 100% on internal divs */
/* zero margin/padding and set overflow to hidden to prevent default browser scrollbar */
html, body { height:100%; margin: 0; padding: 0; overflow: hidden; }
div { margin: 0; padding: 0;  }

/* on child div give it absolute positioning and then use top/bottom to stretch it */
/* top must be equal to the height of the header */
div#scrollable_content {
  position: absolute;
  top: 50px;
  bottom: 0px;
  width: 100%;
  overflow-y:auto;
  border: 1px solid green;
}

window.setTimeout(function () {
$(document).ready(function () {
    var ResizeTarget = $('#content');
ResizeTarget.resize(function () {
    var target = $('#scrollable_content');
    target.css('height', $(document).height() - $("#header").height() - $("#inner_header").height());
}).trigger('resize');
}); }, 500);