Question

我有一个简单的HTML页面，它包含两个垂直对齐的div。由于第二个div，页面可以滚动。我希望第一个div的位置是固定的，或者是不可滚动的，这样只有第二个div可以滚动。我已将position:fixed添加到第一个div的css中，但这次，第二个div被放置在第一个div上，因此第一个div在第二个div下消失body { width:1000px; height:100%; margin:0 auto;/*body ortalama*/ } #div1 { height:300px; background-color:#00CC66; } #div2 { display:block; word-wrap:break-word; padding:30px; font-size:72px; background-color:#FF3; }。

CSS

<div>
  <div id="div1"></div>
  <div id="div2">
    <p>
      <!--Content Here-->
    </p>
  </div>
</div>

HTML

{{1}}

Answer 1

固定始终相对于父窗口，而不是元素。将位置设置为固定后，将其从文档流中取出。

固定定位是绝对定位的子类别。唯一的区别是，对于固定定位的框，包含块由视口建立。

所以在第二个div2中添加这些

position:relative;
top:300px;    /*Bump it down by the height of div1;*/

希望它有所帮助;

Answer 2

将此css添加到#div2（您需要指定#div2的高度，否则滚动条将不知道从哪里开始）：

  overflow-y:auto;
  height:50px;

请参阅此处的示例：http://jsfiddle.net/38xkn/1/（在您将body宽度设置为100px时向右滚动，然后您会看到#div2的滚动条。

Answer 3

您应该添加一个高度并设置溢出自动而不是滚动，因为滚动即使内容小于指定的高度，您也会始终使用滚动条。例如：

#div2 {
    background-color: #FFFF33;
    display: block;
    font-size: 72px;
    height: 200px;
    overflow: auto;
    padding: 30px;
    word-wrap: break-word;
}

Answer 4

好的，这是另一种选择。它的布局有些不同，但它应该完成工作。它使用div1上的绝对定位使其到达顶部，并使用百分比宽度来阻止它覆盖div2的滚动条。它并不完美，所以你可能需要稍微调整它。

HTML

<body>
<div>
     <div id="div1">a</div>
    <div id="div2">
    <p>                               SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDDAMSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSDDDDDDDDDLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</p>
</div>
</div>

</body>

CSS：

body{
    width:100%;
    height:100%;
    margin:0 auto;/*body ortalama*/
overflow:hidden;
}

#div1{
    height:300px;
    background-color:#00CC66;
position:absolute;
top:0;
width:97.5%;
}

#div2{
    display:block;
    word-wrap:break-word;
    padding:30px;
    font-size:72px;
    background-color:#FF3;
  overflow-y:auto;
  max-height:50px;

    padding-top:300px;
    }

实施例： http://jsfiddle.net/38xkn/6/

Css位置：固定代码打破div位置

4 个答案: