Question

我需要一个特定的设置，这在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>

（是的，我将风格和内容分开 - 将它们混合在一起只是为了保持示例简短）

Answer 1

您正在使用overflow可怕的错误。完全摆脱它。将img设置为容器的宽度并使其依赖于该容器，然后将所有内容设置为与您拥有的相同。不要使用内联样式。即使是在这里展示。它们毫无价值，很难指出。

＆＃13;

$(document).scroll(function(){
  
  $('#header').css('top',$(window).scrollTop());
  
});

＆＃13;

    #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%;
    }

＆＃13;

<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>

＆＃13;

滚动窗格，标题垂直固定

1 个答案: