我需要一个在 HTML/CSS 中似乎很难的特定设置。我需要:
- 位于页面顶部的页眉面板，填充可用宽度但也有最小宽度；
- 一个可以垂直滚动的内容页面，并且与标题的最小宽度相同
- 如果最小宽度超过浏览器宽度，那么应该有一个水平滚动条同步移动标题和内容(不是独立的)
这就是我现在拥有的。我错过了什么？
<html>
<head>
</head>
<body style="overflow:hidden;position:relative">
<div id="big-container" style="overflow-y:hidden">
<div id="header" style="position:absolute;top: 0px;left:0px;height:80px;width:100%;min-width:1000px;background-color:blue">
Header
</div>
<div id="container" style="min-width:1000px;position:absolute;top: 80px;left:0px; height:100%;width:100%;padding-bottom:80px;box-sizing:border-box;overflow:hidden">
<div id="content" style="height:100%;width:100%;overflow-y:auto;overflow-x:hidden">
<img src="http://www.fronetics.com/wp-content/uploads/2013/12/networking.jpg" />
</div>
</div>
</div>
</body>
(是的，我将样式和内容分开 - 将它们混合在上面只是为了让示例简短)
最佳答案
您使用的 overflow 非常错误。彻底摆脱它。将您的 img 设置为容器的宽度并使其依赖于它，然后将所有内容设置为与您拥有的相同。不要使用内联样式。甚至在这里展示。它们毫无值(value)且难以指出。
$(document).scroll(function(){
$('#header').css('top',$(window).scrollTop());
}); #header{
position: absolute;
top: 0;
left: 0px;
height: 80px;
width: 100%;
z-index: 999;
min-width: 1000px;
background-color: blue;
}
#container{
min-width: 1000px;
position: absolute;
top: 80px;
left: 0px;
height: 100%;
width: 100%;
padding-bottom: 80px;
box-sizing: border-box;
}
#content{
height: 100%;
width: 100%;
}
img{
max-width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="big-container">
<div id="header">
Header
</div>
<div id="container">
<div id="content">
<img src="http://www.fronetics.com/wp-content/uploads/2013/12/networking.jpg"
</div>
</div>
</div>关于html - 标题垂直固定的滚动 Pane ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27574182/